Question

当您向下滚动页面130px时（因为我设置了它也是标题的高度），然后新类“f-nav”启动，一切都运行良好，除了下面的页面导航菜单，跳过30像素，如下所示：
http://jsfiddle.net/8M2Vh/2/
我键入的“TEXT TEXT”，滚动130像素后，第一行几乎变为“不可见”。

jQuery("document").ready(function($){

var nav = $('nav');

$(window).scroll(function () {
    if ($(this).scrollTop() > 130) {
        nav.addClass("f-nav");
    } else {
        nav.removeClass("f-nav");
    }
});

}）;

这是应该执行此操作的代码。

Answer 1

那是因为当您在position:fixed上设置nav时，元素将从文档流中取出，那么空间可以由您需要的下一个元素填充，以补充您的函数：

var nav = $('nav');
var navh = $('nav').outerHeight();
var mainP = $('#main').css('paddingTop');

$(window).scroll(function () {
    if ($(this).scrollTop() > 130) {
        nav.addClass("f-nav");
        $('#main').css('paddingTop',navh);
   } else {
        nav.removeClass("f-nav");
        $('#main').css('paddingTop',mainP);
    }
});

选中 Demo Fiddle

jQuery（.scroll函数）“bug”，滚动页面“跳转”为30px

1 个答案: