Scrollable Element, How To Change Offset Top On Resize?

After diving deeper into my scrollable element, I found out that once a user resizes a browser window running the following code, the scrollable won't start scrolling from the poin

Solution 1:

Your $(window).resize() listener does not work as desired, because you redeclare the variable locally instead of using your existing variable. Remove the var and that particular problem should be solved. So, you would be looking at

$( window ).resize(function() {
    scrollableTopOffset = $(".scrollable").offset().top;
});

Edit:

Looks like you should consider getting the height of the 'safety zone' up top differently. It looks like you could just use $('.topmenu').height() instead of $('.scrollable').offset().top.

Edit again:

Is it really necessary to have such a complicated structure for your topmenu and related divs? Wouldn't something much simpler like the below work? With that, the first edit's suggested fix looks to work properly.

<divclass="row some-content-block topmenu"><divclass="col-sm-6"><divclass="some-other-content"></div></div><divclass="col-sm-6"><divclass="some-other-content"></div></div></div>

Though not directly related to your initial question, you should brush up on the Bootstrap grid system to avoid future problems with visuals.

Here is a JSFiddle with the changes to the .topmenu area that seems to work.

Solution 2:

define scrollableTopOffset globally

scrollableTopOffset = $(".scrollable").offset().top;

$(window).resize(function() {
    scrollableTopOffset = $(".scrollable").offset().top;
});