使用 jQuery 在滚动时隐藏导航但在悬停时显示

Question

我计划在我的设计顶部使用两层固定位置导航。

当用户向下滚动页面时，我希望导航向上滑动，直到第一层大部分被隐藏。

如果用户随后将鼠标悬停在导航上，则容器应向下滑动，再次显示第一层。

如果用户位于浏览器窗口的最顶部，则不应触发此悬停效果。

此外，当用户滚动回页面的最顶部时，完整的两层导航应该再次完全可见，因为它在初始加载时。

我在使用 javascript 将这些事件链接在一起时遇到了麻烦，不得不求助于 CSS3 transitions 和 jQuery addClass/removeClass 调用的组合。

另外，我只能让整个混合糊炸一次。因此，一旦用户向下滚动并向后滚动，就不会再有动画了。

我当前的代码可以在this fiddle查看

希望这能让我了解我想要做什么。

谁能帮我把这个怪物复活？

代码如下：

HTML

<div id="nav_wrap">
    <div id="nav_one">
        <h2>Nav One</h2>
    </div>
    <div id="nav_two">
        <h3>Nav Two</h3>
    </div>
</div>
<p>blah blah blah etc...</p>

CSS

#nav_wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 100;
}

#nav_one,
#nav_two {
    float: left;
    width: 100%;
    height: 48px;
    background: #111;
}

#nav_two {
    background: #1f4c6b;
    height: 72px;
}

h2, h3 {
    color: #fff;
}

#nav_wrap.fixed {
    margin-top: -42px;
    -webkit-transition: margin-top .5s ease-in-out;
    box-shadow: 0 0 24px #111;
}

#nav_wrap.down {
    margin-top: 0px;
    -webkit-transition: margin-top .5s ease-in-out;
}

#nav_wrap.drop {
    top: 42px;
    -webkit-transition: top .5s ease-in-out;
}

#nav_wrap.up {
    top: 0;
    -webkit-transition: top .5s ease-in-out;
}

Javascript

var top = $('#nav_wrap').offset()
                        .top - parseFloat($('#nav_wrap')
                        .css('marginTop')
                        .replace(/auto/, 0));

$(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y > top) {
        $('#nav_wrap').addClass('fixed');
        $("#nav_wrap").hover(
            function () {
                $(this).addClass('drop');
            },
            function () {
                $(this).addClass('up');
            }
        );

    } else if (y == 0) {

        $('#nav_wrap').addClass('down');

    }
});

Answer 1

您的方法过于复杂。你真正需要做的就是在你的 JavaScript 中切换一个滚动类。这个 CSS 将完成剩下的工作。

注意：代码需要为其他浏览器添加前缀（-moz、-o、-ms），我会考虑提高滚动中调用的addClass 部分的性能，因为事件将被调用很多。

可以在here找到一个示例小提琴。

CSS

#nav_wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    z-index: 100;
}

#nav_one,
#nav_two {
    width: 100%;
    height: 48px;
    background: #111;
}

#nav_two {
    background: #1f4c6b;
    height: 72px;
}

h2, h3 {
    color: #fff;
}

#nav_wrap{
    -webkit-transition: margin-top .5s ease-in-out;
}

#nav_wrap.scroll {
    margin-top: -42px;
    box-shadow: 0 0 24px #111;
}

#nav_wrap.scroll:hover{
    margin-top: 0px;
}

JS

$(window).scroll(function (event) {
    var y = $(this).scrollTop();

    if (y > 0) {

        $('#nav_wrap').addClass('scroll');
    } 
    else{

        $('#nav_wrap').removeClass('scroll');
    }
});