Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Stop Fixed Sidebar When Reach Footer
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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