title: jQuery and Javascript: offset.top() not responsive
body: <p>Is there a way to make offset.top() responsive?  If not, how could I make the animated div on scroll responsive when it touches the top of the browser?</p>
  
  <p>In my fiddle, when you scroll down, the <code>div</code> correctly goes to the top but if you scrunch the screen heightwise, it doesn't act as intended anymore.<br>
  From my understanding, this is because the variable that the div is stored is being called once, but when I bind it to the scroll event, the div doesn't work as intended.</p>
  
  <p>fiddle: <a href="https://jsfiddle.net/jzhang172/j2yrumyg/8/" rel="nofollow">https://jsfiddle.net/jzhang172/j2yrumyg/8/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
  
  var cheese= $('.ok').offset().top; //Define top of 'hey'
  
  //
  //Animates when it reaches red part of page
  //
  $(window).scroll(function() {
      if ( $(window).scrollTop() &gt;= cheese  ) {
    
          $('.ok').addClass('top');
  
          $('.nice').hide().fadeIn().html('ok');
              $(".nice").animate({ 
              left:"0"
          }, 600);
          $('.nice').addClass('maybe');
  
      }
      else{
                  $('.ok').removeClass('top');
                  $('.nice').removeClass('maybe');
                  $('.nice').html('Hey');
  
  
      }
  });
  
  //
  //This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
  //
  
        $('.ok').hover(function(){
           if(!$(this).hasClass("top"))
             $(this).addClass('proj-hover');
           
                },function(){
                  $(this).removeClass('proj-hover');
                 
                });
  
  
  //
  //Animate on click
  //
  $('.ok').click(function(){
      if ( $(window).scrollTop() &gt;= cheese  ) {
  
  }
  else{
      $("body, html").animate({ 
              scrollTop: $('.other').offset().top 
          }, 600);
       
  }
  });
  
  
  
  
  
  
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    box-sizing:border-box;
  }
  body,html{
    padding:0;
    margin:0;
  }
  .div{
    height:100vh;
    width:100%;
    background:#6464FF;
  }
  .other{
    height:1000px;
    width:100%;
    background:#FF6161;
  }
  .ok{
    position:absolute;
    bottom:0;
    left:50%;
    margin-left:-100px;
    width:200px;
    height:50px;
    line-height:50px;
    background:black;
    color:white;
    text-align:center;
    transition:1s;
  }
  
  .top{
    position:fixed;
    top:0;
    left:0;
    transition:.7s;
        margin-left: 0px;
        width:100%;
  
  }
  .proj-hover{
    background:white;
    color:black;
  }
  .blue{
    background:blue;
  }
  .nice{
    transition:0s;
      margin: 0px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="div"&gt;
    
    &lt;div class="ok"&gt;
    &lt;p class="nice"&gt;Hey&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="other"&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>