I'm currently attempting to add a second menu to my website alongside the top menu. I have multiple menus set up in two bootstrap columns (col-8 and col-4). Initially, when I used jQuery selectors outside of a function, everything worked smoothly. However, when I refactored my code to create a function that takes a class as a parameter, the functionality stopped working correctly. The $element variable represents a div element with the class ".navbar.navbar-default.stick-left".
Below is the code snippet:
var stickelement = function(classid) {
$element = $(classid);
console.log($element);
if ($element.length) {
elementOffset = $element.offset().top;
$(window).scroll(function (e) {
scrollTop = $(window).scrollTop() + $('.navbar.navbar-default.navbar-fixed-top').height();
distance = elementOffset - scrollTop;
if (distance < 0 && $element.css('position') != 'fixed') {
$element.css({
'position': 'fixed',
'margin': '0px',
'top': ($('.navbar.navbar-default.navbar-fixed-top').height()).toString() + 'px'
});
}
if (distance > 0 && $element.css('position') == 'fixed') {
$element.css({'position': 'static', 'margin': '50px'});
}
});
}
};
stickelement(".navbar.navbar-default.stick-left");
Upon reloading the page, my console only displays n.fn.init[0] with an uninitialized "top" field inside the proto object and a length of 0.
Could you please help me identify where I may have gone wrong?