How to Make a Fixed Div Scroll Horizontally with Content Using jQuery?

Fixing a Horizontal Scrolling Div with Content Using jQuery

Question:

How can I set the position of a fixed div so that it scrolls horizontally with the content?

Detailed Description:

A div element with the CSS class "scroll_fixed" is initially set to an absolute position. However, when the div reaches the top of the page, jQuery code adds the "fixed" class to fix its position. This setup works well for vertical scrolling, but horizontal scrolling causes issues with content to the right.

Goal:

Make the div scroll horizontally with the content, similar to the second box in a provided example.

Answer:

To achieve horizontal scrolling for the div, the solution keeps the element's position fixed but manipulates its left property:

<code class="javascript">var leftInit = $(".scroll_fixed").offset().left;
var top = $('.scroll_fixed').offset().top - parseFloat($('.scroll_fixed').css('margin-top').replace(/auto/, 0));

$(window).scroll(function(event) {
    var x = 0 - $(this).scrollLeft();
    var y = $(this).scrollTop();

    // Check if the element should be fixed based on vertical scroll
    if (y >= top) {
        // if so, ad the fixed class
        $('.scroll_fixed').addClass('fixed');
    } else {
        // otherwise remove it
        $('.scroll_fixed').removeClass('fixed');
    }

    // Adjust the element's left position based on horizontal scroll
    $(".scroll_fixed").offset({
        left: x + leftInit
    });

});</code>

This ensures the div scrolls horizontally with the page content while maintaining its fixed position vertically.

The above is the detailed content of How to Make a Fixed Div Scroll Horizontally with Content Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!