javascript - 使用 jQuery 隐藏滚动时的导航，但悬停时显示

Question

我计划在设计的顶部有一个两层固定位置导航。

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

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

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

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

我在使用 javascript 将这些事件链接在一起时遇到问题，不得不结合使用 CSS3 转换 和 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 部分的性能，因为事件将会被大量调用。

可以找到一个 fiddle 示例 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');
    }
});