CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2559519
user2559519

Reputation:

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

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");
    }
    });

Upvotes: 1

Views: 186

Answers (7)

user2559519
user2559519

Reputation:

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)

Upvotes: 0

manta
manta

Reputation: 1688

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/

Upvotes: 0

Ishank
Ishank

Reputation: 2926

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

Rest looks ok.

Upvotes: 0

Joseph
Joseph

Reputation: 119887

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.

Upvotes: 0

Manoj
Manoj

Reputation: 1890

Try this code:

Fiddle

CSS:

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

Upvotes: 2

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

Just add this css:

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

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

Cheers

Upvotes: 0

Reza Mamun
Reza Mamun

Reputation: 6189

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;
}

Upvotes: 0

Related Questions