Databases
StackOverflow2013
Postsdbo
PODeactivate jQuery stick navigation once a specific div is scrolled to
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODeactivate jQuery stick navigation once a specific div is scrolled to
    text
    copied!<p>I have two instances of divs being converted from position relative to position fixed once the scrollTop is reached. However, i'm looking for a way to switch off one function once a footer div is scrolled to. If you take a look at the sidebar on this page, you can get a better understanding as to what i'm trying to achieve, <a href="http://staging.alcoholrehab-florida.com/alcohol-rehab-programs.html" rel="nofollow">http://staging.alcoholrehab-florida.com/alcohol-rehab-programs.html</a></p> <p>Once the page reaches the bottom footer div, i need to set the sidebar back to position:relative in order for it not to cover up the rest of the page and be able to scroll up along with the content section.</p> <p>Below is the current jQuery script i am using. Any help or advice is greatly appreciated!</p> <pre><code> &lt;script&gt; $(function() { // grab the initial top offset of the navigation var sticky_navigation_offset_top = $('#sticky_navigation').offset().top; // our function that decides weather the navigation bar should have "fixed" css position or not. var sticky_navigation = function(){ var scroll_top = $(window).scrollTop(); // our current vertical position from the top // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative if (scroll_top &gt; ( sticky_navigation_offset_top - 120 )) { $('#sticky_navigation').css({ 'position': 'fixed', 'top':120, 'background':'#f0f0f0' }); $('.container').css({ 'position': 'relative', 'top':144 }); $('.sidebar').css({ 'position': 'fixed', 'top':264 }); } else { $('#sticky_navigation').css({ 'position': 'relative', 'top':0, 'background':'#fff' }); $('.container').css({ 'position': 'relative', 'top':60 }); $('.sidebar').css({ 'position': 'relative', 'top':0 }); } }; // run our function on load sticky_navigation(); // and run it again every time you scroll $(window).scroll(function() { sticky_navigation(); }); }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload