浮动菜单栏仅显示滚动上方

时间:2015-07-22 21:58:30

标签: javascript jquery html css

我有一个浮动的菜单栏,例如

<div id="header">
    <div id="logo">Start Slowly Scrolling Down<br /> This Page!</div>
    <div id="navWrap">
        <div id="nav">
            <ul>
                <li><a href="#" class="smoothScroll">Demo Link 1</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 2</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 3</a></li>
                <li><a href="#" class="smoothScroll">Demo Link 4</a></li>
            </ul>    
            <br class="clearLeft" />
        </div>
    </div>
</div>

和一些奇特的CSS样式,我们需要添加JavaScript代码以将所有内容绑定在一起

$(function() {
// Stick the #nav to the top of the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
    var scrollTop = $w.scrollTop();
    var shouldBeFixed = scrollTop > navHomeY;
    if (shouldBeFixed && !isFixed) {
        nav.css({
            position: 'fixed',
            top: 0,
            left: nav.offset().left,
            width: nav.width()
        });
        isFixed = true;
    }
    else if (!shouldBeFixed && isFixed)
    {
        nav.css({
            position: 'static'
        });
        isFixed = false;
    }
});
});

所以浮动效果非常好,但我只想向上滚动才能看到菜单,所以如果向下滚动,菜单就会消失。

主要的是我不想回到顶端。因此,如果我只是稍微看一下菜单,就会出现菜单栏。

0 个答案:

没有答案