创建一个粘性导航css和jquery

Creating a sticky nav css and jquery

本文关键字：导航 css jquery 一个 创建      更新时间：2023-11-16

我目前正在为一个网站开发粘性导航，我遇到了一些问题，当导航变成position:fixed时，它似乎会跳起来，看起来很"笨重"，

http://jsfiddle.net/DKtLR/

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

因为您只想在它完全离开视口时使其固定，然后滑入，只需修改top属性，然后将其动画化回视图。请参阅此小提琴以获取工作示例。

更新

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

请注意，当向上滚动时仍然会有闪烁——这是因为导航从固定位置"跳"回静态位置。使用与上述动画类似的技术可以很容易地解决此问题。

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

在顶部，然后用动画修复，这样就不会显得笨拙

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

我在示例中使用的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 style属性的动画来将动画从slideDown()调整为slide in，同时您可以确切地知道在动画之前必须将菜单放在视图端口上方的像素数。

当你滚动页面，菜单离开视图时，它会将其切换到固定位置并向下滚动菜单，这样它不仅会跳到视图中，而且会平滑地回到中。

我在这个解决方案的基础上制定了这个替代解决方案。基于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都在这里。

相关文章：