位置固定 - 水平滚动 [英] Position Fixed - Horizontal Scroll

问题描述

我有一个左侧垂直侧栏，当用户垂直滚动时，侧栏与用户垂直滚动。但是，如果用户在窗口太小的情况下水平滚动，则垂直边栏随窗口滑动。如何阻止侧栏水平滚动，但允许侧栏与用户垂直滚动。

I have a left vertical side bar that when the user scrolls vertically, the side bar scrolls vertically with the user. However when the user scrolls horizontally if the window is too small, the vertical side bar slides along with the window. How do i stop the side bar from scrolling horizontally but also allowing the side bar to scroll with the user vertically.

我不想这样做。

overflow: hidden;

，因为我希望用户能够水平滚动，但我只是不想要侧边栏与他们一起。

as i want the user to have the ability to scroll horizontally but i just dont want the side bar to come along with them.

这是我的javascript：

this is my javascript:

$(document).ready(function(){
    var top = $("#sidebar").offset().top;
    $(window).scroll(function(){
        var y = $(window).scrollTop();
        if (y >= top) {
            $("#sidebar").addClass('fixed');
        } else {
            $("#sidebar").removeClass('fixed');
        }
    });
});

我的css是：

#sidebar {
    position: absolute;
    height: 100%;
    min-width: 100px;
    width: 100px;
    overflow: hidden;
    background-color: #ededed;
    border-right: 1px solid #aaa
    }
#sidebar.fixed {
    position: fixed;
    height:100%;
    top: 0%;
    z-index: 1;
}

推荐答案

理论上，您可以使用 .scroll 功能来更新元素的绝对顶部位置， ，但是在左侧属性更改时忽略滚动事件。

theoretically you could use the .scroll feature to update the elements absolute top position, if the top changes, but ignore the scroll event when the left property changes.

请查看这个小而且非常简单的示例。 http://jsfiddle.net/Hbkdt/

Please look at this small and very simple example. http://jsfiddle.net/Hbkdt/

注意：您可以将其与动画功能结合使用，并使窗口事件反跳，以便它只会每30-50毫秒触发一次，然后更新值。

Notice: You can combine this with an animate feature, and debounce the window event, so that it does only fire every 30-50 milliseconds and then updates the values.

动画和去抖动示例： http://jsfiddle.net/Hbkdt/1/

这篇关于位置固定 - 水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！