javascript - 创建一个粘性导航 css 和 jquery

Question

我目前正在为一个网站制作一个粘性导航，我遇到了一些问题，当导航变得position:fixed似乎跳跃并且看起来“笨重”时，这是我正在尝试做的一个小提琴，

http://jsfiddle.net/DKtLR/

理想情况下，结果将是用户滚动并且导航不在固定位置，直到它滚动出视口，然后它变得固定并滑回视图。

Answer 1

由于您只希望它在完全超出视口时固定，然后滑入，只需修改top属性，然后将其动画化回到视图中。请参阅此小提琴以获取工作示例。

更新

这个更新的小提琴应该更好地工作，因为它只应用尚未应用的行为，并在返回正常的“静态”位置时完全删除动态样式。

请注意，向上滚动时仍有闪烁 - 这是因为导航从其固定位置“跳”回其静态位置。这可以使用与上述动画类似的技术轻松解决。

Answer 2

您可以简单地使用 StickyScroller jquery 插件：http: //vertstudios.com/blog/jquery-sticky-scroller-position-fixed-plugin/

Answer 3

我根据这个解决方案制作了这个替代解决方案。基于setInterval功能（另请参阅控制台日志）。

var interval_id = false;
var curOffset, oldOffset;
var altmenu;
$(document).ready(function(){
    altmenu = $('.top-nav')[0].cloneNode(true);
    altmenu.style.position = 'absolute';
    altmenu.style.display = 'none';
    document.body.appendChild(altmenu);
    oldOffset = $(window).scrollTop();
    $(document).bind('scroll',function(){
        if (interval_id) {
            return;
        }
        //altmenu.style.display = 'none'; // optional
        interval_id = setInterval(function() {
            curOffset = $(window).scrollTop();
            if(curOffset == oldOffset) {
                console.log('scrolling stopped',curOffset);
                clearInterval(interval_id);
                interval_id = false;
                if (curOffset>120) {
                    altmenu.style.display = 'block';
                } else {
                    altmenu.style.display = 'none';
                }
                $(altmenu).css({
                    top: (curOffset-120)+'px'
                }).animate({
                    top: (curOffset)+'px'
                }, 500);
            }
            oldOffset = curOffset;
        }, 500); //setInterval
    });//scroll
});//ready

测试脚本和jsfiddle在这里。

Answer 4

在顶部，然后用动画固定，所以它不笨重

这可能是您正在寻找的解决方案，因为它在滚动出视图时提供了固定菜单栏，但是当它从顶部切换到固定时，它会执行向下滑动动画，因此感觉不像您描述的那样它笨重。

我在示例中使用的 HTML（简化）：

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        ...
    </ul>
</div>
<div id="content" />

CSS当然很简单（只有相关的样式）

#menu {
    position: absolute;
    width: 100%;
}
#menu.out {
    position: fixed;
}
#menu ul {
    margin: 0;
    list-style: none;
}
#menu ul li {
    display: inline-block;
}

以及执行它并且执行得如此之快的脚本（因此它执行得尽可能快，因为最慢的部分是对浏览器本机getBoundingClientRect()函数的调用，这意味着它仍然很快，非常快）：

$(function() {

    // save element references for faster execution
    var menu = $("#menu");
    var ul = menu.find("ul");
    var content = $("#content")[0];

    // get menu actual height
    var menuHeight = menu[0].getBoundingClientRect().bottom;

    // detect whether menu is scrolled out
    var inView= true;

    $(document).scroll(function(evt) {
        evt.preventDefault();

        var top = content.getBoundingClientRect().top;
        var nextInView = (top + menuHeight) > 0;

        // did state change so we have to change menu positioning
        if (inView ^ nextInView)
        {
            inView = nextInView;
            if (inView)
            {
                menu.removeClass("out");
            }
            else
            {
                menu.addClass("out");
                ul.hide().slideDown("fast");
            }
        }
    });

});

就是这样。您还可以通过设置 top 样式属性的动画slideDown()来调整动画，slide in同时您确切地知道必须在动画之前放置菜单的视口上方多少像素。

当您滚动页面并且菜单离开视图时，它会将其切换到固定位置并向下滚动菜单，因此它不仅可以跳转到视图中，而且可以顺利返回。