Fix element – CSS/javascript

I’ve been searching for a fix to my problem:

I’ve implemented the bootstrap .affix to an horizontal element (position: fixed), so that the element can stay at the same position even on scrolling. I could easily to that. 

Then I had to apply the same effet to a sidebar. This one gave me headache as I had to make it sticky too, but only from the navbar, untill the footer. In fact

  1. I needed the sticky effet to start once the navbar disappear by scrolling,
  2. I didn’t want the sidebar to overlap the footer

The first step was quite easy to do, as I’ve previously managed to implement it in the horizontal element with the simple use of the .affix class, the following script (and of course, calling jquery + bootstrap)

 <script type=‘text/javascript’>
   $(’#sticky’).affix({
     offset: {
     top: $(‘header’).height()
     }
     });
   </script>

 <!– jQuery –>
   <script src=“js/jquery.js”></script>

   <!– Bootstrap Core JavaScript –>
   <script src=“js/bootstrap.min.js”></script>

Basically, the ellement with the ID sticky will trigger one the height of the nav has been scrolled down.

Sometime you have to set a specific css to adapt the effect to your design, in my case:  

 #sticky.affix {
     top: 0;
     z-index:20;
   }


Then problems started to show. I’ve spend at least 5 hours looking at a solution, and finding the right of. First I’ve tried to apply the bootstrap guide of affix-bottom. In order for the sticky element to stop once reaching the footer.

No one of my 10th attempt work. Probably because of a conflicted between several scripts…

I then search and search and search for a solution, and finally landed to Andrew Henderson website. 

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

He has written a full, didactical plugin which works independently from Bootstrap and which is really easy to customise.

It’s open source, and the amount and Q&A are a really good guide to resolve some eventual pending doubts.

I personnally used snippet from the demo files to set my own code.

Fresh and clean!

Spread the love

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *