Question

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

http://jsfiddle.net/DKtLR/

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

Answer 1

由于您只希望它在完全脱离视口时被修复，然后滑入，只需修改top属性，然后将其动画回视图。有关工作示例，请参阅this fiddle。

<强>更新

This updated fiddle应该更好，因为它只应用行为（如果尚未应用），并在返回到正常的“静态”位置时完全删除动态样式。

请注意，向上滚动时仍然会出现闪烁 - 这是因为导航从其固定位置“跳跃”回到静态位置。使用与上述动画类似的技术可以很容易地解决这个问题。

Answer 2

您只需使用StickyScroller jquery插件： http://vertstudios.com/blog/jquery-sticky-scroller-position-fixed-plugin/

Answer 3

我根据this solution制作了这个替代解决方案。基于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

Test script和jsfiddle就在这里。

Answer 4

在顶部，然后用动画修复，所以它不是笨重的

This might be the solution你正在寻找，因为它在滚出视图时提供了固定的菜单栏，但是当它从顶部切换到固定时，它会做一个向下滑动的动画，所以感觉不到正如你所描述的那样 clunky 。

我在示例中使用的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");
            }
        }
    });

});

就是这样。您还可以通过动画顶部样式属性将动画从slideDown()调整为slide in，同时您确切知道视图端口上方有多少像素，您必须在动画之前放置菜单。

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

创建粘性nav css和jquery

4 个答案:

在顶部，然后用动画修复，所以它不是笨重的