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
Post a Comment