title: Stopping position:fixed div at certain point (before footer starts)
body: <p>The problem has been discussed on the forum a few times however I cannot make it work so I ask for help. </p>
  
  <p>I have a side contact menu (as a widget) in my WP website and made it position: fixed so it doesn't change position during scrolling. However, I want it to stop being fixed before it hits footer div because it just looks weird.</p>
  
  <p>As far as I read I need jquery and a script that changes my fixed position to a relative at some point so I feel like I understand the basic mechanic of it and even found several scripts but all of them doesn't work at all.</p>
  
  <p>I want something exactly like in here: 
  <a href="https://stackoverflow.com/questions/45328251/stop-fixed-position-at-certain-div-or-certain-position">Stop fixed position at certain div or certain position</a></p>
  
  <p>I created 3 files: html, css, js and put all the codes from the answer and it just does not work at all..</p>
  
  <p>My js file - java.js</p>
  
  <pre><code>jQuery(document).ready(function() {
  
  var navTop = $('#nav').offset().top;
  var navStop = $('#stop').offset().top;
  var lastMode = "absolute";
  
  $(window).scroll(function() {
    var mode;
    if ($(this).scrollTop() &gt;= navTop) {
      if ($(this).scrollTop() - navStop + $('#nav').height() &gt; 0)
        mode = 'absolute';
      else
        mode = 'fixed';
    } else {
      mode = 'absolute';
    }
  
    if (lastMode !== mode) {
      if (mode == 'fixed') {
        $('#nav').css('position', 'fixed');
        $('#nav').css('top', '0');
      } else {
        $('#nav').css('position', 'absolute');
        $('#nav').css('top', navTop);
      }
      lastMode = mode;
    }
  });
  
  }
  </code></pre>
  
  <p>My css file- style.css:</p>
  
  <pre><code>#nav {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 200px;
    width: 100px;
    height: 50px;
  }
  
  #stop {
    width: 100%;
    background: blue;
    height: 300px;
    position: absolute;
    top: 900px;
    margin-top: 20px;
  }
  </code></pre>
  
  <p>My html doc - index.html</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;script 
  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="javascript" src="java.js"&gt;&lt;/script&gt;
  &lt;body style="height:5000px;"&gt;
    &lt;div id="nav"&gt;&lt;/div&gt;
    &lt;div id="stop"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Since the code above is just an answer from another topic - I wanted to change it for my needs but it seems I do something wrong because it does not work. </p>
  
  <p>To detail: I want side contact menu <code>&lt;div class="widget-contact"&gt;</code> to start normally like it is right now (position fixed) and stop it from being fixed when it hits 
  <code>&lt;div id="colophon-inside" class="footer-three"&gt;</code></p>
  
  <p>I am fine using html/css however I do not understand js and I feel my problem is quite easy to solve.</p>
  
  <p>Could you help?</p>