CODEWITHSUNDEEP
jquerycssscrollcss-position
Don P
Don P

Reputation: 63718

Make a <div> absolutely positioned depending on scroll height

I have a navbar on my page below a titlebar . I want the navbar to become absolutely positioned and aligned to the top of my page, after the user scrolls down.

How do I do this?

Two examples are gmail and on Pinterest.com

Upvotes: 2

Views: 596

Answers (3)

Matheus Salmi
Matheus Salmi

Reputation: 266

Is this what you want?

(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);

Upvotes: 3

christophmccann
christophmccann

Reputation: 4211

You dont need jQuery for this. You can do it all with CSS e.g.

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

Obviously, you'll need to add significantly more CSS to get the style and structure you want - but that should get you off in the right direction.

Upvotes: -1

Boris Bachovski
Boris Bachovski

Reputation: 662

If I understand correctly you are looking for CSS tag "position: fixed;"

Upvotes: -1

Related Questions