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');
    }
});

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

1 个答案: