Question

我在网站左侧有一个“固定”菜单栏，我想在用户滚动时按下页面上的滚动条。到目前为止，我尝试了两种方法，一种是css，一种是jquery：

1）我的第一次尝试是使用css样式修复：

#leftframe {
 position:fixed;
 width: 200;
}

通常，这在垂直滚动方面效果很好。此解决方案的问题在于，当窗口不是很宽，并且用户尝试滚动时，它会直接覆盖页面内容。

2）经过一些研究，我发现有一个jquery方法允许你在一个方向上修复一个元素，如堆栈溢出所述：CSS: fixed position on x-axis but not y?

使用那里概述的方法，我写了这个很好的小函数来为我做这个：

function float_vertical_scroll(id) {
    $(window).scroll(function(){
        $(id).css({
            'top': $(this).scrollTop() //Use it later
        });
    });
}

只是，现在的问题是，我在Chrome和Safari中尝试了这一点，并且在垂直滚动期间都显示菜单栏的明显闪烁。菜单以非常“波涛汹涌”的方式移动，css解决方案顺利地将其滑入页面。

有谁知道为什么jquery解决方案如此不稳定，如果可以采取任何措施呢？有没有第三种解决方案可以让我“两全其美”？

谢谢大家。

Answer 1

我想我刚刚想出了一个很好的解决方案来解决这个问题，所以我会在这里发布，以防其他人也在寻找。

总结一下，我的问题是我想要一个垂直固定的左菜单，所以它跟随垂直滚动，但不是水平固定。 css只允许双向固定。因此，使用css解决方案，当窗口很小时，会出现一个水平滚动条，使用时会导致菜单浮动页面内容。

我在初始问题中作为另一个解决方案提出的float_vertical_scroll函数有一个缺陷，当你垂直滚动时，javascript会刷得太慢，导致菜单栏以一种跳跃，波涛汹涌的方式移动。该解决方案将位置设置为绝对位置，并依赖于jquery在每个滚动事件上向下移动菜单。

大多数页面上关于侧边栏菜单的事情是99％的滚动是垂直的。很少是水平的。所以我想，如果我们可以使水平滚动波动，并且垂直滚动平滑怎么办？

这导致了下面的解决方案。我没有将框架设置为绝对并在javascript中垂直滚动，而是将其设置为固定，并在水平滚动时反转偏移。这取消了水平滚动。水平滚动可能有点跳跃，但没有人真正关心，因为它很少使用：

function float_horizontal_scroll(id) {
    jQuery(window).scroll(function(){
        jQuery(id).css({
            'left': 0 - jQuery(this).scrollLeft()
        });
    });
}

#leftframe {
 position:fixed;
 width: 200;
}

在jquery中将菜单固定在一个方向上

1 个答案: