Question

我试图让滚动导航变得不粘，而不需要使用重插件来做这么小的事情。

这是迄今为止的代码：

        var menuOffset = $('#nav-wrap')[0].offsetTop; 
        $(document).bind('ready scroll', function() {
            var docScroll = $(document).scrollTop();
            if (docScroll > 300) {
                if (!$('#nav-wrap').hasClass('sticky')) {
                    $('#nav-wrap').addClass('sticky').css({
                        top: '-80px'
                    }).stop().animate({
                        top: 0
                    }, 500);
                }
            } else {

                    $('#nav-wrap').removeClass('sticky').removeAttr('style');
            }

        });

工作得很好，虽然我需要＃nav-wrap在删除类'sticky'之前向上滑动并且静态导航返回原位（并在浏览器视口中），因为我不喜欢它跳回原位。有什么建议吗？

http://jsfiddle.net/D8V7b/60/

由于

Answer 1

我假设在你的真实场景中，你不能只使用固定的css位置来实现这一点。

您似乎等待太长时间才能激活粘性，尝试在文档的scrollTop仅为20时启动它，例如，在代码中不是300.

var docScroll = $(document).scrollTop();
            if (docScroll > 20) { ...

更新了小提琴：http://jsfiddle.net/JvnwY/

粘滞导航向下滑动滚动。向上滑动问题

1 个答案: