How would I make div stick to top of screen using this code?

Question

The code below is test code I'm using. The blue bar is supposed to stick to the top of the screen when it reaches the top.

This works on my browser, but the reason I'm here is because when it sticks to the top, it all of a sudden becomes smaller. As you see the blue bar starts with a full width across the container, but on my computer/browser, after it sticks to the top, the div shrinks to just the size of the text.

To make matters worse, I cannot reproduce the problem on jfiddle , because in jfiddle it doesn't work at all! (The images are just there to create a scroll).

Here is the jfiddle

Here is the jquery:

var titlePosition = $('.title').offset().top;


    $(window).scroll(function () {
    var scrollBar = $(this).scrollTop();

    if (scrollBar > titlePosition) {
        $('.title').css("top", "0px");
        $('.title').css("position", "fixed");

    } else {
        $('.title').css("position", "relative");
    }
    });

Answer 1

Try this code:

Fiddle

CSS :

.title {
    font-size:200%;
    background-color:blue;
    width:100%
}

Answer 2

Update your code:

if (scrollBar > titlePosition) {
    $('.title').css("top", scrollBar+"px");
    $('.title').css("position", "fixed");

} else {
    $('.title').css("position", "static"); //otherwise it will still get that top value and cause unwanted position;
}

Answer 3

Just add this css:

.title {
    ...
    width: 100%;   /*This does the trick*/
}

Here you have it working: http://jsfiddle.net/edgarinvillegas/yPWAC/3/

Cheers

Answer 4

Set left to 0 as well. Additionally, some optimizations .

I prefer appending/removing classes to put all your CSS in your stylesheet. Saves you from problems later on when the code gets huge (who would be looking for CSS in JS files anyway?).

Also, cache objects. Everytime you fire scroll , your code fetches every single .title in the DOM and generates a jQuery object. Not very optimal. Instead, get all .title and just do the modifications on each scroll.

CSS:

.title.fixed {
    position:fixed;
    left:0;
    right:0;
    top:0;
}

JS:

var titlePosition = $('.title').offset().top;
var win = $(window);
var title = $('.title');

win.scroll(function () {
    var scrollBar = win.scrollTop();
    if (scrollBar > titlePosition) title.addClass('fixed');
    else title.removeClass('fixed');
});

As for your non-working fiddle, you forgot to include jQuery. That should be found on the top left.

Answer 5

Try giving z-index:999 or, using jQuery - $('.title').css("z-index", "999");

Rest looks ok.

Answer 6

var titlePosition = $('.title').offset().top;

.top is not a function. offset() returns an object containing the properties top and left

Replace with:

var titlePosition = $('.title').offset();

You can now access the properties like so:

titlePosition.top or titlePosition.left

reference: .offset() http://api.jquery.com/offset/

Answer 7

Thanks for all the feedback.

Even though it helped improve, in the end the div was still resizing. Fixing the width to specific values was not responsive enough.

I finally stumbled upon a solution, based on all the advice:

http://jsfiddle.net/yPWAC/8/

var titleWidth = $('.title').width()

/*then after the div is fixed I change the width */

$('.title').css("width",titleWidth);

I made jquery hold the original width of the div, then change the width of the sticky div to whatever that value is.

For some reason, even if I defined the original width in CSS, the new sticky width would still come out a different size in the browser. So this method gives it the same width as the original (whatever it may be)