How to Make a Div Stick to the Top of the Screen While Scrolling?

Maintaining a Div at the Screen Top While Scrolling

In certain scenarios, it is desirable to have a div cling to the top of the screen when a user scrolls down past it, effectively "following" them as they navigate a webpage. This behavior ensures that essential elements, such as buttons or navigation controls, remain readily accessible.

To achieve this effect, you can employ the following strategy:

JavaScript Code:

<code class="js">// Cache jQuery objects for performance optimization.
var $window = $(window),
    $stickyEl = $('#the-sticky-div'),
    elTop = $stickyEl.offset().top;

// Attach a handler to the window's scroll event.
$window.scroll(function() {
    // Determine if the div has been scrolled past.
    if ($window.scrollTop() > elTop) {
        // Add a CSS class to make the div sticky.
        $stickyEl.addClass('sticky');
    } else {
        // Remove the sticky class when the user scrolls back up.
        $stickyEl.removeClass('sticky');
    }
});</code>

CSS Class:

<code class="css">#the-sticky-div.sticky {
    position: fixed;
    top: 0;
}</code>

Explanation:

The JavaScript code initially caches jQuery objects for better performance. It then adds a scroll event listener to the window, which is triggered whenever the user scrolls vertically. Within the listener, it checks if the div has been scrolled past by comparing the window's scroll position with the div's offset from the top of the page. If the scroll position is greater than the offset, a sticky CSS class is added to the div, which sets its position to fixed and places it at the top of the screen. Conversely, when the user scrolls back up and the scroll position is less than the offset, the sticky class is removed, returning the div to its original position.

The above is the detailed content of How to Make a Div Stick to the Top of the Screen While Scrolling?. For more information, please follow other related articles on the PHP Chinese website!