2

我在网站左侧有一个“固定”菜单栏，我想在用户滚动时跟随滚动条向下滚动。到目前为止，我已经尝试了两种方法，一种是 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 解决方案如此不稳定，如果有什么可以做的吗？有没有第三种解决方案可以让我“两全其美”？

感谢大家。

4

1 回答 1

3

我想我刚刚为这个问题想出了一个很好的解决方案，所以我会把它贴在这里，以防其他人也在寻找一些东西。

回顾一下，我的问题是我想要一个左侧菜单垂直固定，所以它跟随垂直滚动，而不是水平固定。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;
}
于 2013-04-27T04:09:55.123 回答