jquery - 在 jquery 中固定一个方向的菜单

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;
}