我有一個文本靜態文本元素，當用戶滾動超過 600 像素時會發生變化，當它滾動超過 1400 像素時會再次發生變化
$(window).scroll(function () {
if ($(this).scrollTop() > 600) {
$('.p-circle').html('Text 1');
$('.p-circle-s').html('Text 2');
}
});
$(window).scroll(function () {
if ($(this).scrollTop() > 1400) {
$('.p-circle').html('Text 1 updated');
$('.p-circle-s').html('Text 2 updated');
}
});
我怎樣才能為它們制作一個基本的褪色影片，我嘗試了下一個變體，但它們效果不佳（它褪色了 2 次）
if (scrollTop > 600 && scrollTop <= 1400) {
$('.p-circle').fadeOut(500, function() {
$(this).text('Text 1').fadeIn(500);
});
$('.p-circle-s').fadeOut(500, function() {
$(this).text('Text 2').fadeIn(500);
});
} else if (scrollTop > 1400 && scrollTop <= 2100) {
$('.p-circle').fadeOut(500, function() {
$(this).text('Text 1 updated').fadeIn(500);
});
$('.p-circle-s').fadeOut(500, function() {
$(this).text('Text 2 Updated').fadeIn(500);
});
}
uj5u.com熱心網友回復：
我認為你在正確的軌道上，但是你最后一點的邏輯沒有測驗轉換是否已經發生。類似的東西：
if ($(this).scrollTop() > 600 && $(this).scrollTop() <= 1400 && $(".p-circle").text() != 'Text 1')
我想我弄錯了你的價值觀，但這里有一個小提琴可以讓你走上正軌......
https://jsfiddle.net/64mj3k7n/3/
uj5u.com熱心網友回復：
更好的解決方案是創建一個函式（或類）Waypoints，使用如下：
Waypoints(window, [0, 100, 600, 1400], (wp) => {
console.log(wp); // {index:Int, value:Int}
});
它接受三個引數：
- 要滾動觀看的元素（或字串選擇器）
- 一個scrollY 航路點值陣列
- 一個回呼函式
回呼僅在滾動索引更改時觸發- 以防止每次滾動事件呼叫時累積。
/**
* Waypoints
* Trigger callbacks on a scrollY milestone
* @url https://stackoverflow.com/a/70520524/383904
* @param {string|object} el String selector or Element object
* @param {array} waypoints Array of px from lower to higher
* @param {function} cb Callback function
*/
function Waypoints(el, waypoints = [0], cb) {
el = (typeof el === "string") ? document.querySelector(el) : el;
const wp = [...waypoints].reverse();
const wpTot = wp.length;
const getIndex = (n) => {
const i = wp.findIndex(m => m <= n);
return wpTot - 1 - (i < 0 ? wpTot : i);
};
let index = -1;
const getTask = () => {
const i = getIndex(el.scrollY);
if (index === i) return; // No task to trigger
index = i; // Update index
const value = wp[wpTot - 1 - i]; // Get the waypoint name
cb({ index, value }); // Trigger the callback
};
el.addEventListener("scroll", getTask);
window.addEventListener("DOMContentLoaded", () => getTask);
window.addEventListener("load", () => getTask);
getTask();
}
/**
* YOUR APP:
*/
const $circle1 = $('.p-circle');
const $circle2 = $('.p-circle-s');
const circle1txt = ["Text 1 scroll", "Text 1", "Text 1 updated"];
const circle2txt = ["Text 2 scroll", "Text 2", "Text 2 updated"];
Waypoints(window, [0, 600, 1400], (wp) => {
$circle1.fadeOut(500, () => {
$circle1.text(circle1txt[wp.index]).fadeIn(500);
});
$circle2.fadeOut(500, () => {
$circle2.text(circle2txt[wp.index]).fadeIn(500);
});
});body { height: 3000px; } /* Just to force some scrollbars for this demo */
[class^="p-"] { position: fixed; }
.p-circle-s { top: 2rem; }<div class="p-circle"></div>
<div class="p-circle-s"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/397094.html
標籤：javascript 查询