CODEWITHSUNDEEP
javascriptjqueryhtml
Alex C
Alex C

Reputation: 951

jquery: Update element offset top on window resize

Hope this isn't a duplicate question as I've been searching for some time for this issue and haven't found a clean solution yet. Maybe I'm just not searching correctly.

I have a navbar which has its position set to fixed trough javascript when it reaches the top of the viewport. I'm using jquery 1.11.3 to get offset().top of the element, however this value doesn't seem to update itself when the vertical height of the viewport changes.

For example, on an Android tablet with Chrome the address bar disappears, the 'resize' event is triggered but the offset().top of the element remains the same causing my navbar to remain static although it was scrolled past the top of the viewport and should be now fixed. I have also used a timeout to read the new value on resize but to no avail.

Is there some way to ask jquery to reconsider the viewport size so that I don't update my internal offset based on the new values? Or maybe this isn't the way to go?

Upvotes: 1

Views: 1383

Answers (2)

Syaiful Shah Zinan
Syaiful Shah Zinan

Reputation: 11

I encounter the same problem as you. On window resize, my element offset value was not change. In my case, my element was in fixed position. Maybe yours too? But if I scroll the page, the element offset changed. So In my case, I just put a fixed offset value to be use for my element.

Upvotes: 1

Armen
Armen

Reputation: 4202

Try implement this code in your window resize event

elementTop = $('#element').offset().top;
windowTop = $(window).scrollTop();

if( elementTop - windowTop < 0) {
 // write your set fixed position code here
}

Upvotes: 0

Related Questions