Javascript jQuery标题滚动，如何偏移？

我正在考虑使用标题滚动，就像这里的一样，所以当我向下滚动标题时，它会缩回，当我向上滚动时，它会回到视图中

HTML:

jQuery：

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}

//向下滚动时隐藏标题
卷轴；
var lastScrollTop=0；
varδ=5；
var navbarHeight=$（'header'）.outerHeight（）；
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}
}, 250);
函数hasScrolled（）{
var st=$（this.scrollTop（）；
//确保它们滚动的次数大于增量
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
//向下滚动
$（'header'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}否则{
//向上滚动
如果（st+$（窗口）.height（）<$（文档）.height（））{
$（'header'）.removeClass（'nav-up'）.addClass（'nav-down'）；
}
}
lastScrollTop=st；
}

这几乎正是我所需要的，除了在我的主页顶部有一个500px高的图像问题。我不希望标题在图像上向上滚动，所以当它到达页面顶部500px的位置时，我希望它缩回

---

我已经玩过代码，但我无法让它做我需要的事情，有什么想法吗？

也许可以用

st>500

交换

st>navbarHeight

？

所以当你向下滚动时，标题永远不可见。向上滚动时，标题在图像区域的顶部和底部之间不可见

如果您根本不想在头500像素处显示标题，请删除

|st

if（st>500+navbarHeight | | st

演示

//向下滚动时隐藏标题
卷轴；
var lastScrollTop=0；
varδ=5；
var navbarHeight=$（'header'）.outerHeight（）；
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}
}, 250);
函数hasScrolled（）{
var st=$（this.scrollTop（）；
//确保它们滚动的次数大于增量
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
//向下滚动
$（'header'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}否则{
//向上滚动
如果（st>500+导航栏高度| | st<导航栏高度）{
$（'header'）.removeClass（'nav-up'）.addClass（'nav-down'）；
}否则{
$（'header'）.removeClass（'nav-down'）.addClass（'nav-up'）；
}
}
lastScrollTop=st；
}

正文{
填充顶部：40px；
保证金：0；
}
标题{
背景#f5b335；
高度：40px；
位置：固定；
排名：0；
过渡：前0.2秒缓进缓出；
宽度：100%；
}
.导航{
顶部：-40px；
}
主要{
背景：url（数据：image/png；base64，ivborw0kgoaaaansuhueugaaaaaakcayaaacnms+9aaapkleqvqyv2o8donsfwyg0nptywtruaaj0qxmybnm1brifaizrbi3uirz75unguhgbfvabgfshqgaixypamad8wgc/DOrZ4AAAAASUVORK5CYII=
)重复；
高度：2000px；
}
页脚{
背景：ddd；
}
* {
颜色：透明
}

这是您的菜单。
这是你的身体。
这是你的页脚。

谢谢你，尼扎，但这实际上与我想要的正好相反。这将在向下滚动的第一个500px上保持标题显示。我想要的是，在页面向上滚动之前，标题根本不显示，然后当我从页面顶部到达500px时（而不是从顶部向下到500px）再次隐藏。因此，基本上有一个500px的“安静区”，页面顶部没有标题。这有意义吗？好的，我明白。你甚至不想在“滚动”位于顶部时显示标题？所以第一个500px根本没有头。就是这样，谢谢！删除

|st

会给我带来我想要的东西。在任何滚动发生之前，该条确实会出现在页面加载上，但我相信我能找到答案。再次感谢。谢谢你，比约恩，这确实有效，但这是我对尼扎回应的回答——这将保持头在第一个500px的位置。

body {
    padding-top: 40px;
}
header {
    background: #f5b335;
    height: 40px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
    width: 100%;
}
.nav-up {
    top: -40px;
}
main {
   background:url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
   ) repeat;
    height: 2000px;
}
footer { background: #ddd;}
* { color: transparent}

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scrolled down and are past the navbar, add class .nav-up.
    // This is necessary so you never see what is "behind" the navbar.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav-up').addClass('nav-down');
        }
    }

    lastScrollTop = st;
}