jquery - Stop sticky sidebar overlapping with footer waypoints -


i have app has side navigation bar several links. using jquery waypoints make sure side navigation fixed user scrolls down page. working except links overlapping footer @ bottom of page.

the view follows

.container   .row     .col-sm-3       .side-navbar         .nav           %li             %a{href: '#overview'}               overview           %li             %a{href: '#specification'}           ...     .col-sm-9       #overview         ... content ...       #specification         ... content ...  #footer   ... content .... 

i have following in js:

$('.side-navbar').waypoint('sticky', {   offset: 0 }); 

i aware bootstrap comes affix built in keen keep using waypoints if possible. advice on how stop overlap appreciated :)

$('#footer').waypoint(function(direction) {   $('.side-navbar')     .toggleclass('sticky', direction === 'up')     .toggleclass('at-bottom', direction === 'down') }, {   offset: function() {     return $('.side-navbar').outerheight()   } }) 

this says when top of footer [height of navbar] away top of window (which means bottom of navbar touching top of footer), remove sticky class , add at-bottom class. it's style at-bottom class make stay needs stay.


Comments

Popular posts from this blog

java - Oracle EBS .ClassNotFoundException: oracle.apps.fnd.formsClient.FormsLauncher.class ERROR -

c# - how to use buttonedit in devexpress gridcontrol -

nvd3.js - angularjs-nvd3-directives setting color in legend as well as in chart elements -