To hide a sticky element when reaching a certain ID or class in jQuery, you can use the .scroll()
and .offset()
functions to detect when the element is within the desired range and then use .hide()
or .css()
to hide the element. Here is an example code snippet:
$(window).scroll(function() { var stickyElement = $('.sticky-element'); var targetElement = $('#target-element'); var targetPosition = targetElement.offset().top; var windowHeight = $(window).height(); var currentPosition = $(this).scrollTop(); if (currentPosition + windowHeight >= targetPosition) { stickyElement.hide(); // or use .css('display', 'none'); } else { stickyElement.show(); // or use .css('display', 'block'); } });
In this example, .sticky-element
is the class of the element you want to hide/show, and #target-element
is the ID or class of the element you want to reach before hiding the sticky element.
The code calculates the position of the target element using .offset().top
and compares it to the current scroll position ($(this).scrollTop()
) plus the window height ($(window).height()
). If the current position plus window height is greater than or equal to the target position, the sticky element is hidden, otherwise it is shown.
You can adjust the values and functions used in this example to fit your specific use case.