Question

我在页面上有两个菜单，我试图在页面加载时显示一个菜单，另一个在滚动时显示。这是我的页面Link

我希望在位置位于顶部时显示白色部分当滚动经过顶部位置时的蓝色部分

这就是我目前的尝试

 <script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
// 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-bar-below op-page-header cf').addClass('banner include-nav');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('banner include-nav').addClass('nav-bar-below op-page-header cf');
        }
    }

    lastScrollTop = st;
}
});//]]> 

</script>

有人可以帮助它不为我工作

Answer 1

每当触发滚动事件时，您都可以检测滚动是否位于页面顶部。如果是，则显示白色标题，反之亦然

$(window).scroll( function() {
    var scrollPosition = $(window).scrollTop();

    if(scrollPosition === 0) {
        //show white header
    }
    else {
        //show blue header
    }
}

当然，您必须确保首次加载页面时，它首先显示白色（使用css）。因为上面的代码不会运行直到用户滚动（触发此事件）

<强> *修改

为此： “当滚动经过顶部位置时，蓝色部分”

你可以尝试这个插件 http://stickyjs.com/

Answer 2

用于将菜单固定在最高位置的示例代码。

$(document).scroll(function() {

var y = $(document).scrollTop()
var header = $('.include-nav');
var blue-menu = $('.cf');
var screenHeight = header.height();
if (y >= screenHeight) {
    blue-menu.css({
        position : "fixed",
        "top" : "0",
        "left" : "0"
    });
    header.css("position", "relative");
} else {
    blue-menu.css("position", "relative");
}
});

如何根据开始和滚动显示和隐藏菜单

2 个答案: