I have successfully implemented a code that sets a position:fixed to a div when it scrolls past the top of the screen. The code I used is as follows:
var $window = $(window),
$stickyEl = $('#the-sticky-div'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});
The CSS for this setup is:
#the-sticky-div.sticky {
position: fixed;
top: 0px;
width:100%;
z-index:2000;
}
My current question revolves around modifying this so that the div remains under a navbar of height 60px, rather than at the very top of the page. I understand that I need to adjust the CSS by setting `top: 60px', but I am unsure how to incorporate the 60px offset in the jQuery code to make the div stick below the navbar sooner instead of scrolling beneath it first.
Any guidance on this matter would be greatly appreciated.