目前使用的是:
$(function(){ // document ready
var stickyTop = $('.navigation-wrap').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop) {
$('.navigation-wrap').addClass('sticky');
}
else {
$('.navigation-wrap').removeClass('sticky');
}
});
});
把导航完美地贴在屏幕的顶部,然而.在使用以下内容时:
$(document).ready(function () {
$(document).on("scroll", onScroll);
//smoothscroll
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");
$('a').each(function () {
$(this).removeClass('navactive');
});
$(this).addClass('navactive');
var target = this.hash,
menu = target;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});
以突出显示当前按钮,具体取决于滚动页面的深度。现在的问题是,50 is导航覆盖了内容的顶部。如果单击其中一个按钮,页面将向下滚动并覆盖标题。
有没有办法在代码中添加50‘t边距,这样nav就不会碍事了?我试过使用偏移量,但没能让它起作用。
发布于 2014-02-20 09:33:54
是的,在这一行中增加更多像素:
'scrollTop': $target.offset().top+2
例如:
'scrollTop': $target.offset().top+52
https://stackoverflow.com/questions/21915318
复制