I have a piece of code that adds a CSS class to an element once the user scrolls to a specific point on the page. This is intended to create a sticky menu bar. The distance to scroll is determined based on the screen resolution and is calculated using JQuery. I also want to modify the CSS property of this class (.header_scroll) to adjust the height of the element it is applied to, matching the height of another dynamic element (#nav_wrap).
jQuery("document").ready(function($){
//Get the height of the header
var headHeight = $("#header_wrap");
var headerHeight = headHeight.innerHeight();
//Get the height of the navigation bar
var menuFindHeight = $("#nav_wrap");
var menuHeight = menuFindHeight.innerHeight();
//Set the CSS value for the class
$(".header_scroll").css({"height": menuHeight});
//Add class on scroll
var nav = $('#header_wrap');
$(window).scroll(function () {
if ($(this).scrollTop() > (headerHeight - menuHeight)) {
nav.addClass("header_scroll");
} else {
nav.removeClass("header_scroll");
}
});
});`
The code for adding the class is working correctly. However, no matter what adjustments I make, the:
//Set the CSS value for the class
$(".header_scroll").css({"height": menuHeight});
part does not seem to be functioning. I have checked in the Chrome inspect element tool and expected to see
height: xxxpx;
in the .header_scroll class, but it is not appearing.