Posted on 

jQuery 選單隨視窗滾動跟隨效果

紀錄一下在別的網站原始碼看到的…

1
2
3
4
5
6
7
8
9
10
11
12
13
var offset = $(elem).offset();  
var topPadding = 0;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top - 20) {
$(elem).stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
}, 300);
} else {
$(elem).stop().animate({
marginTop: 0
}, 300);
}
});

elem 的部份代換為選單的元素即可

offset.top - 20 的那個 20 的值可能要視狀況微調一下,有可能是有 fixed 的 header,或其他會蓋住元素的問題要往下推的部份。