[英]JQuery floating menu bar, scroll position and delay
我正在制作一個菜單欄,對JQuery來說還很新。 我希望菜單欄在向下滾動時有所延遲,但是在向上滾動時,我希望它始終停留在瀏覽器窗口的頂部,而不會延遲。 現在雙方的延遲都相同,並且滾動到頂部時沒有延遲。
我希望有一個人可以幫助我 :)
$(document).ready(function(){
var speed = 1000;
var speedtop = 0;
var menu = $('nav#header');
var offset = menu.offset().top;
var menuStartPos = menu.position().top;
var top_offset = 0;
updateFloatingMenu(); //we don't have this just yet
$(window).scroll(function(){
updateFloatingMenu();
});
function updateFloatingMenu(){
var scrollAmount = $(document).scrollTop();
var newPosition = menuStartPos + scrollAmount;
if(scrollAmount > offset){
var topPos = (newPosition-offset) + top_offset;
menu.stop().animate({top: topPos}, speed);
}else{
menu.stop().animate({top: menuStartPos}, speedtop);
}
};
});
將類添加到您的CSS:
#header.fixed {
position:fixed;
top: 0 !important; /* important, to override inline style-tag */
}
向上滾動時,將此類添加到菜單中,以始終將其固定在頁面頂部
var offset = 0;
function updateFloatingMenu(){
var scrollAmount = $(document).scrollTop();
if (scrollAmount > offset){
menu.stop().removeClass('fixed').animate({'top': scrollAmount}, speed);
} else {
menu.stop().addClass('fixed')
menu.css('top', scrollAmount); // Set top here so it's in the right place when reverting scroll
}
offset = scrollAmount; // Update current offset
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.