Scrollable element, how to change offset top on resize?

Question

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 point I want it to do (the very moment when the scrollable element hits the top side of the window, which is why I set the variable before running my code: var scrollableTopOffset = $(".scrollable").offset().top;). This offset would change anytime the window is resized, so I thought adding this would work (but it does not):

/* I need to make the idea of the following code work: */
  $( window ).resize(function() {
    /* First reset margin-top before getting offset again after resizing:  */
    $(".scrollable").stop().animate({
                marginTop: 0
     });

     /* Secondly get the current offset after reset: */
     scrollableTopOffset = $(".scrollable").offset().top;
  });
  /* End of code what needs to be answered in my question */

Using the following code:

$(document).ready(function() {
  var topPadding = 10;
  //Set the scrollable offset before starting the scroll
  var scrollableTopOffset = $(".scrollable").offset().top;

  /* I need to make the idea of the following code work: */
  $(window).resize(function() {
    /* First reset margin-top before getting offset again after resizing:  */
    $(".scrollable").stop().animate({
      marginTop: 0
    });

    /* Second get the current offset after reset: */
    scrollableTopOffset = $(".scrollable").offset().top;
  });
  /* End of code what needs to be answered in my question */

  $(window).scroll(function() {
    /* To make sure margin-top won't be applied so that the scrollable won't exceed the footer: */
    if (($("footer").offset().top - scrollableTopOffset + topPadding) < $(window).scrollTop()) {
      //Do nothing or add 0 margin:
      $(".scrollable").stop().animate({
        marginTop: 0
      });
    }
    /* When scrolling, determine wether the browser window still contains
		scrollable: */
    else if (scrollableTopOffset < $(window).scrollTop()) {
      //Code when scrollable is within the browser window...
      //$(".scrollable").addClass("scrollable-fixed");
      $(".scrollable").stop().animate({
        marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
      });
    } else {
      //Code when scrollabe is not within the browser window...
      //$(".scrollable").removeClass("scrollable-fixed");
      $(".scrollable").stop().animate({
        marginTop: 0
      });
    }
  });
});

.container .topmenu {
  height: auto;
  background-color: transparent;
}
.some-content-block {
  height: 150px;
  margin-bottom: 5px;
  background-color: red;
}
.some-other-content {
  height: 130px;
  margin-bottom: 5px;
  background-color: yellow;
}
.scrollable {
  height: 75px;
  background-color: cyan;
}
footer {
  height: 200px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: blue;">
  <div class="row">
    <div class="col-md-12">
      <div class="some-content-block topmenu">
        <div class="col-md-6 col-sm-6">
          <div class="some-other-content">
          </div>
        </div>
        <div class="col-md-6 col-sm-6">
          <div class="some-other-content">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-10 col-sm-10 col-md-10">
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
      <div class="scrollable">
      </div>
    </div>
  </div>
</div>
<footer></footer>

JSFiddle

Can anyone tell/expain me how I can make my code work?

Answer 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.

<div class="row some-content-block topmenu">
  <div class="col-sm-6">
    <div class="some-other-content">
    </div>
  </div>
  <div class="col-sm-6">
    <div class="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.

Answer 2

define scrollableTopOffset globally

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

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