Databases
StackOverflow2013
Postsdbo
POjQuery Stop Fixed Sidebar When Reach Footer
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Stop Fixed Sidebar When Reach Footer
    text
    copied!<p>I have a sidebar widget on my website, when I scroll the page, sidebar will become position fixed. But this sidebar obstruct the footer. I want the sidebar stop fixed when touch the footer, something like this script <a href="http://jsfiddle.net/bryanjamesross/VtPcm/" rel="nofollow">http://jsfiddle.net/bryanjamesross/VtPcm/</a></p> <p>This is my website <a href="http://www.creativebrain.web.id/view/gadget/171/performa-buas-lg-g2-menantang-samsung-galaxy-s4" rel="nofollow">http://www.creativebrain.web.id/view/gadget/171/performa-buas-lg-g2-menantang-samsung-galaxy-s4</a></p> <p>Here is my code to fixed position the sidebar</p> <pre><code> &lt;script type="text/javascript"&gt; $(function() { var nav = $('#gads300x600'); var navHomeY = nav.offset().top; var isFixed = false; var $w = $(window); $w.scroll(function() { var scrollTop = $w.scrollTop(); var shouldBeFixed = scrollTop &gt; navHomeY; if (shouldBeFixed &amp;&amp; !isFixed) { nav.css({ position: 'fixed', top: '90px', left: nav.offset().left, width: nav.width() }); nav.css('z-index',999); isFixed = true; } else if (!shouldBeFixed &amp;&amp; isFixed) { nav.css({ position: 'static' }); isFixed = false; } }); }); &lt;/script&gt; </code></pre> <p>I have modified that code like script in jsfiddle above, but I think something wrong in my code</p> <pre><code> &lt;script type="text/javascript"&gt; $(function() { var nav = $('#gads300x600'); var footer = $('#copyright'); var navHomeY = nav.offset().top; var navFooterY = footer.offset().top; var isFixed = false; var $w = $(window); $w.scroll(function() { var scrollTop = $w.scrollTop(); var shouldBeFixed = scrollTop &gt; navHomeY; var maxY = navFooterY - nav.outerHeight(); if (shouldBeFixed &amp;&amp; !isFixed) { if (scrollTop &lt; maxY) { nav.css({ position: 'absolute', top: '0px', left: nav.offset().left, width: nav.width() }); nav.css('z-index',1000); } else{ nav.css({ position: 'fixed', top: '90px', left: nav.offset().left, width: nav.width() }); nav.css('z-index',1000); } isFixed = true; } else if (!shouldBeFixed &amp;&amp; isFixed) { nav.css({ position: 'static' }); isFixed = false; } }); }); &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