Reset css or script when browser is resized

Question

This might be hard to explain but say my browser size is small like in image 1. The bottom text is positioned where it should be and when I scroll down a script activates.

EDIT https://jsfiddle.net/j4f53rds/1/

function fixDiv() {
    var $div = $("#nav_color");
    var top = $div.data("top");
    if ($(window).scrollTop() > top) {
        $('#nav_color').css({'position': 'fixed', 'top': '0px'}); 
    }
    else {
        $('#nav_color').css({'position': 'absolute', 'top' : top + 'px'});
    }
}

$("#nav_color").data("top", $("#nav_color").offset().top); 
$(window).scroll(fixDiv);

The script causes the text on the bottom to become fixed on the top of the html as the user scrolls down. Now here comes the issue. After firing, if I resize the browser, say make it full screen, like in image two, and then scroll back up. The text doesn't reposition to it's would be new location, it resets back to the original position in the smaller browser. How do I get the script to take into account a new browser size when the user scrolls back up?

enter image description here

jalynn2 · Accepted Answer · 2015-07-21 17:14:31Z

2

The problem is that you are saving off the top position when the page loads, but that position changes when the window is resized. Try this:

$(window).resize(function() {
    $("#nav_color").data("top", $("#nav_color").offset().top); 
    fixDiv(); //not sure if you need this.
});

answered Jul 21, 2015 at 17:14

jalynn2

6,4772 gold badges20 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maioman · Accepted Answer · 2015-07-23 21:27:28Z

1

The problem is that you're top: inline CSS property is sticking to the #nav_color element and is not being recalculated when you resize,

try this (variable top definition still isn't perfect..):

var top = $("#nav_color").offset().top; 

function fixDiv() {
    var $div = $("#nav_color");
   // var top = $div.data("top"); shouldn't define it here  
    console.log(top);
    if ($(window).scrollTop() > top) {
        $('#nav_color').css({'position': 'fixed', 'top': '0px'}); 
    }
    else {
        $('#nav_color').css({'position': 'absolute', 'top' : top + 'px'});
    }
}
$(window).scroll(fixDiv);

function positionDiv() {
    top = ($(window).innerHeight())*0.86;
    if ($("#nav_color").css('position') == 'absolute'){
        $("#nav_color").css({ 'top': top });
    }

}
$(window).resize(positionDiv);

fiddle

edited Jul 23, 2015 at 21:27

answered Jul 21, 2015 at 17:20

maioman

18.8k4 gold badges39 silver badges46 bronze badges

3 Comments

maioman Over a year ago

this fiddle is working as it's supposed to (as jquery processes - the listeners are executing the code in the right spot). the problem are in the code it's executing... I'm probably not fully understanding your issue but couldn't you just use CSS bottom property to position div on the bottom

user2252219 Over a year ago

Sorry I must not be explaining this correctly. The nav is positioned at the bottom of the viewport at page load, however, when you scroll down it will touch the top of the page and "stick" there and fix itself as the scroll continues. When you scroll back to the top of the page, it will "unstick" itself and go back to the bottom of the viewport. This (jsfiddle.net/j4f53rds/3) is what its supposed to do normally. But the problem arises when a browser is resized.

user2252219 Over a year ago

Hmm. The issue still comes up. When you grow the 'results' section of the fiddle and scroll to the bottom and then to the top, it doesn't repoisition itself to the new browser size. Press run again to see where it should be.

andrescpacheco · Accepted Answer · 2015-07-21 17:09:37Z

0

This should work:

$addHandler(window, "resize", fixDiv);

Each time a user resize the window, the funcion fixDiv will be triggered

answered Jul 21, 2015 at 17:09

andrescpacheco

7561 gold badge9 silver badges30 bronze badges

1 Comment

user2252219 Over a year ago

I gave that a go but :(. I updated OP with a fiddle.

Bhavin Solanki · Accepted Answer · 2015-07-22 04:18:25Z

0

You need to call function on window.resize You can call your function like :

$(window).resize(function(e) {
    $("#nav_color").data("top", $("#nav_color").offset().top()); 
    fixDiv(); //not sure if you need this.
});

edited Jul 22, 2015 at 4:18

answered Jul 21, 2015 at 17:08

Bhavin Solanki

4,8143 gold badges28 silver badges47 bronze badges

2 Comments

user2252219 Over a year ago

Hmm I'm not quite getting it correct for some reason. :(

Bhavin Solanki Over a year ago

@user2252219 sorry don't get you

Collectives™ on Stack Overflow

Reset css or script when browser is resized

4 Answers 4

Comments

3 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related