Сделать <div>абсолютно позиционированным в зависимости от высоты прокрутки

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

Вам не нужен jQuery для этого. Вы можете сделать все это с помощью CSS, например

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

Очевидно, вам нужно добавить значительно больше CSS, чтобы получить нужный стиль и структуру, но это должно привести вас в правильном направлении.

Answer 3

Если я правильно понимаю, вы ищете тег CSS "position: fixed;"