[英]jQuery parallax effect and lagging
我有一個帶有標題和內容的頁面。 向下滾動時,標題菜單會停留在頂部,而內容具有某種“視差”效果(它的移動速度比標題要快,這正是我所需要的)。
我的小型jQuery腳本可很好地實現“視差”效果,但是當向下滾動達到最大值時,內容開始出現停滯/滯后。 該腳本似乎一直在嘗試不斷地向上移動內容(至少使用Apple Magic Mouse鼠標),這會造成這種不良的副作用。
我該如何預防呢?
PS:為了清楚地顯示卡紙問題,我在JSFiddle中誇大了視差效果。
PPS:測試時請確保您具有可滾動的頁面(較小的瀏覽器高度),否則,效果和問題當然不會發生。
//sticky header menu $(window).scroll(function() { if ($(document).scrollTop() > 92) { if (!$('.fixed').length) { $('.menu').addClass('fixed'); } } else { if ($('.fixed').length) { $('.menu').removeClass('fixed'); } } }); // Parallax of content on scroll var iCurScrollPos = 0; $(window).scroll(function() { iCurScrollPos = $(this).scrollTop(); $('.content').css('margin-top', -iCurScrollPos * 1.2 + 'px') });
body { width: 100%; height: 100%; margin: 0px; padding: 0px; background: #ccc; } header { position: relative; width: 100%; background: #fff; z-index: 1; height: 146px; } .void { position: relative; width: 100%; height: 100px; } .menu { position: relative; width: 100%; height: 54px; background: #aaa; } .fixed { position: fixed; left: 0px; top: 0px; } img { width: 100% }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <div class="void"></div> <nav class="menu"></nav> </header> <div class="content"> <img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg"> </div>
JSFiddle
您可以使用滾動位置的歷史記錄,通過比較最后兩個位置是否與第三和第四位置相同,來確定是否發生了卡頓現象:
$(window).scroll(function() {
if ($(document).scrollTop() > 92){
if (!$('.fixed').length){$('.menu').addClass('fixed');}
}
else {
if ($('.fixed').length){$('.menu').removeClass('fixed');}
}
});
// Parallax of page on scroll
var iCurScrollPos = 0;
// Contains the last 4 scroll positons.
var lastPositions = [];
$(window).scroll(function () {
iCurScrollPos = $(this).scrollTop();
lastPositions.push(iCurScrollPos);
// Control over when locaties are marked as duplicates. Use it to fine tune the response.
var duplicateRange = 20;
// The stutter bug can be caught be checking if two last locations are the same as the 3rd and 4th.
if(Math.abs(lastPositions[0] - lastPositions[2]) < duplicateRange && Math.abs(lastPositions[1] - lastPositions[3]) < duplicateRange){
lastPositions = [];
return;
}
console.log(lastPositions);
if(lastPositions.length === 4){
lastPositions = [];
}
$('.content').css('margin-top',-iCurScrollPos*1.2+'px')
});
jsFiddle: https ://jsfiddle.net/maartendev/sj5egqhd/25/
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<header>
<div class="void"></div>
<nav class="menu">
</nav>
</header>
<div class="content">
<!-- Picture displayed twice for the example only -->
<!-- to be sure everyone gets scollable page-->
<img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg">
<img src="https://farm8.staticflickr.com/7632/16990947835_3894284fd8_b.jpg">
</div>
<style>
body{
width:100%;
height:100%;
margin:0px;
padding:0px;
background: #ccc;
}
header{
position:relative;
width:100%;
background: #fff;
z-index:1;
height:146px;
}
.void{
position:relative;
width:100%;
height:100px;
}
.menu{
position:relative;
width:100%;
height:54px;
background:#aaa;
}
.fixed{
position: fixed;
left:0px;
top: 0px;
}
img{
width:100%
}
</style>
<script>
// Sticky header menu
$(window).scroll(function() {
if ($(document).scrollTop() > 92){
if (!$('.fixed').length){$('.menu').addClass('fixed');}
}else {
if ($('.fixed').length){$('.menu').removeClass('fixed');}
}
});
// Parallax of page on scroll
var iCurScrollPos = 0;
$(window).scroll(function () {
console.log(iCurScrollPos ,iCurScrollPos - screen.height,$(window).height());
var max_sc = iCurScrollPos - screen.height;
iCurScrollPos = $(this).scrollTop();
if(iCurScrollPos < max_sc)
$('.content').css('margin-top',-iCurScrollPos*1.2+'px')
});
</script>
在文檔末尾時,您必須停止滾動事件。
要計算您的頁面結尾iCurScrollPos-screen.height 。
找到相同的jsfiddle鏈接。 https://jsfiddle.net/cpo73s5g/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.