jQuery头部滚动，如何抵消？

我正在使用像这里的标题滚动https://jsfiddle.net/mariusc23/s6mLJ/31/，所以当我向下滚动标题缩进时，当我向上滚动时，它回到视图中。jQuery头部滚动，如何抵消？

HTML：

<header class="nav-down"> 
    This is your menu. 
</header> 
<main> 
    This is your body. 
</main> 
<footer> 
    This is your footer. 
</footer>

CSS：

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}

的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; 
}

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

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

来源

2016-03-15 kevngibsn

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

如果您不想在头部显示首个500像素，请移除|| st < navbarHeight。

if (st > 500 + navbarHeight || st < navbarHeight) { 
    $('header').removeClass('nav-up').addClass('nav-down'); 
} else { 
    $('header').removeClass('nav-down').addClass('nav-up'); 
}

演示

// 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 > 500 + navbarHeight || st < navbarHeight) { 
 
     $('header').removeClass('nav-up').addClass('nav-down'); 
 
    } else { 
 
     $('header').removeClass('nav-down').addClass('nav-up'); 
 
    } 
 
    } 
 
    lastScrollTop = st; 
 
}

body { 
 
    padding-top: 40px; 
 
    margin: 0; 
 
} 
 

 
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 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="nav-down"> 
 
    This is your menu. 
 
</header> 
 
<main> 
 
    <img src="" width="100%" height="500px" style="background-color:#ccc;" /> This is your body. 
 
</main> 
 
<footer> 
 
    This is your footer. 
 
</footer>

来源

2016-03-15 13:29:39 NiZa

谢谢NiZa，但这实际上与我所寻找的相反。这将保持向下滚动显示头部的第一个500px。我想要的是在页面向上滚动之前，页眉根本不显示，然后在页面顶部达到500px（而不是从顶部减小500px）时再次隐藏。所以基本上有一个500px的“安静区域”，页面顶部没有标题。那有意义吗？ – kevngibsn

好吧，我明白了。当滚动位于顶部时，您甚至不想显示标题？所以第一个500px没有标题。 – NiZa

检查更新的答案，请让我知道。 – NiZa

也许交换st > navbarHeight与st > 500？

来源

2016-03-15 13:22:45

谢谢你比约恩，这样做的工作，但它是为我的回答NIZA的回应 - 这持续了第一500px的到位头。 – kevngibsn

jQuery头部滚动，如何抵消？

回答

相关问题