How Do I Stop Static Sidebar at Footer

Question

I have a static sidebar on scroll but when it reaches the footer it overlaps. Is there a way for me to stop this scrolling onto the footer? I understand this may be a simple concept but I have little experience working with the Scroll event in JQuery so any help would be fantastic.

Please find my code and a CodePen below.

 <div id="main">
   <div class="spacing">CONTENT HERE TO SHOW HOW THE SCROLL WILL WORK. PLEASE SCROLL DOWN</div>
   <div class="container">
      <div id="sidebar">
         <div id="nav-anchor"></div>
         <nav>
            <ul>
               <li><a href="#blue">Blue</a></li>
               <li><a href="#green">Green</a></li>
               <li><a href="#red">Red</a></li>
               <li><a href="#yellow">Yellow</a></li>
               <li><a href="#purple">Purple</a></li>
            </ul>
         </nav>
      </div>
      <!-- /sidebar -->
      <div id="content">
         <section id="blue">
            ...
         </section>
         <section id="green">
            ...
         </section>
         <section id="red">
            ...
         </section>
         <section id="yellow">
            ...
         </section>
         <section id="purple">
            ...    
         </section>
      </div>
      <!-- /#content -->
   </div>
   <!-- /.container -->
   <footer>
      <p>Footer here</p>
   </footer>
</div>
<!-- /#main -->


$(document).ready(function(){

    $(window).scroll(function(){
        var window_top = $(window).scrollTop() + 12; 
        var div_top = $('#nav-anchor').offset().top;
            if (window_top > div_top) {
                $('nav').addClass('stick');
            } else {
                $('nav').removeClass('stick');
            }
    });


});

http://codepen.io/harryberry94/pen/MyOezg

Since I Cannot comment yet there has already been a post on this [Here](http://stackoverflow.com/questions/16726916/jquery-stop-fixed-floating-div-when-it-hits-another-div) — Skel, Apr 06 '16 at 08:32
something like this [PEN](http://codepen.io/anon/pen/LNOMQQ) ? — elreeda, Apr 06 '16 at 08:32
Something similar John but rather than it sit behind the footer can it not just change back to its original position at the top? — Harry, Apr 06 '16 at 08:50

score 0 · Answer 1 · answered Apr 06 '16 at 08:34

You can use css for that if all you want is for your div not to overlap the footer, no need to use javascript and the scroll event. Just add z-index:-1; for nav.stick. Also if it needs a greater z-index to go over other elements in the page you can give the footer position:absolute; and a greater z-index (to keep content from going under the footer add padding-bottom to the body element).

score 0 · Accepted Answer · answered Apr 06 '16 at 08:41

0

If you want to hide the static element when it is overlapping the footer, add one more condition in your if condition after $('nav').addClass('stick'); :

var footer_top = $("footer").offset().top;
var static_div_bottom = $('nav').offset().top + $('nav').height();
$('#abc').text(footer_top +" " +  static_div_bottom +" " + window_top);
if(static_div_bottom > footer_top){
    $('nav').removeClass('stick');
}

answered Apr 06 '16 at 08:41

Vikas Joshi

96
4

Is there a way to move it back to its original position? – Harry Apr 06 '16 at 08:54
Try adjusting `top` of the `nav`.. $('nav').css('top', footer_top - static_div_bottom -12 ); $('nav').css('position', "fixed"); But don't forget to reset `top` when it's not supposed to overlap footer. – Vikas Joshi Apr 06 '16 at 09:05

How Do I Stop Static Sidebar at Footer

2 Answers2