Question

我的页面下方标题栏上有一个导航栏。在用户向下滚动后，我希望导航栏绝对定位并与页面顶部对齐。

我该怎么做？

两个例子是gmail和Pinterest.com

Answer 1

这是你想要的吗？

(function($) {
    $.fn.stalker = function(options) {
        var defaults = {
            fix : true, // false if you don't want it to fix the parent element
            endless : false // true if you don't want it to stop
        };
        var options = $.extend(defaults, options);

        return this.each(function() {
            var item = $(this);
            var parent = item.parent();

            // fix
            if(options.fix)
                parent.css('position', 'relative');

            // item
            var itemOffset = item.offset();
            var itemPos = item.position();
            var itemHeight = item.outerHeight(true);
            var itemWidth = item.width();
            var itemMarginTop = parseInt(item.css('margin-top'));

            // parent
            var parHeight = parent.height();
            var parPaddingTop = parseInt(parent.css('padding-top'));
            var parOffset = parent.offset();

            // general
            var scrollStart = itemOffset.top - itemMarginTop;
            var scrollEnd = parHeight + parPaddingTop + parOffset.top - itemHeight;
            var cssEnd = parHeight + parPaddingTop - itemHeight;

            $(window).scroll(function() {
                var dy = $(window).scrollTop(),
                    newTop;

                if(dy >= scrollStart && dy <= scrollEnd) {
                    item.css({
                        'position' : 'fixed',
                        'left' : itemOffset.left + 'px',
                        'top' : '0px',
                        'width' : itemWidth + 'px'
                    });
                } else {
                    if(!options.endless) {
                        newTop = (dy <= scrollStart) ? itemPos.top : cssEnd;

                        item.css({
                            'position' : 'absolute',
                            'left' : itemPos.left + 'px',
                            'top' : newTop + 'px',
                            'width' : itemWidth + 'px'
                        }); 
                    } else {
                        if(dy <= scrollStart) {
                            item.css({
                                'position' : 'absolute',
                                'left' : itemPos.left + 'px',
                                'top' : itemPos.top + 'px',
                                'width' : itemWidth + 'px'
                            });
                        }
                    }
                }
            })                  
        });
    };
})(jQuery);

Answer 2

如果我理解正确，你正在寻找CSS标签＆＃34; position：fixed;＆＃34;

Answer 3

你不需要jQuery。您可以使用CSS完成所有操作，例如

#nav-bar {
    position:fixed;
    top:0px;
    left:0px;
}

显然，你需要添加更多的CSS才能获得你想要的风格和结构 - 但这应该会让你走向正确的方向。

根据滚动高度</div>使<div>绝对定位

3 个答案: