This question brought back memories of a JSFIDDLE I created some time ago to explore the same concept. I've added comments to make it easier to follow...
While it may not directly address your query, I believe it can assist in comprehending the elements required for implementing a sticky navigation effect using JQuery, especially for those who are uncertain.
JavaScript/JQuery code:
(refer to jsfiddle for the accompanying html/css )
//window - the container that holds and renders the document.
//document - the rendered html within the window. the document can be bigger than the window as with this example as scrolling is needed..
//refer to css for more info on the appended classes to nav bar and proceeding element.
$(document).ready(function () {
//add a scroll function to the document that
$(document).on('scroll', function () {
//get the number of pixels that the window is from the top of the document. this is zero at first.
var scrollTop = $(this).scrollTop();
//insert the name of your sticky nav element here in place of .scrollFixed
$('.scrollFixed').each(function () {
//scrollFix variable is initialized as .scrollFixed object with all its attributes.
var scrollFix = $(this);
//gets offset of sticky nav element in pixels
var topDistance = scrollFix.offset().top;
var previousElement = scrollFix.prev();
//this is just for debugging and learning purposes.
$('.fixed_info').html('nav bar is ' + topDistance + ' pixels from top of document');
//if you put topDistance here instead of the number manually, the nav bar will flicker.
//unsure why..
//checks to see whether nav element has been scrolled past the top of window.
if ((298) < scrollTop) {
//make sticky nav a fixed element
scrollFix.addClass("stuck");
//extend the element below for this example so proceeding elements don't visually jump up
//when closing the empty gap.
$(".element_below_fixed_nav_bar").addClass("extend");
//indicates element is fixed!
scrollFix.html("Element now fixed!");
//you will have to manually put the topDistance here as well...
//this checks whether the nav element's original top has passed the top of
//the enclosing window.
//it needs to become scrollable again
} else if (298 >= scrollTop && scrollFix.hasClass('stuck')) {
//make sticky nav a scrollable element
scrollFix.removeClass('stuck');
//make proceeding element shorter to compensate for sticky nav pushing elements below it down.
$(".element_below_fixed_nav_bar").removeClass("extend");
//indicates element is scrollable!
scrollFix.html("Element now moveable!");
}
});
});
});
It aligns closely with the reasoning behind the JavaScript code you provided earlier.
Identify the number of pixels the window is from the top of the document. Initially set at 0 when the document loads unless specified otherwise. This updates with each scroll action.
Determine the offset in pixels of the navigation bar element from the top of the document.
Verify if the navigation bar has reached the top of the window by comparing its offset to that of the window. If yes, make it fixed in position.
Check if the original offset of the navigation bar has fallen below the top of the window. In such a case, enable the navigation bar to be scrollable once again.
Although it might not directly address your specific question, I believe it sheds light on the key components involved in implementing a sticky navigation effect through JQuery for those encountering uncertainty in this scenario.