如何避免位置:垂直滚动时固定在屏幕上？

Question

我问过这个问题,这个问题对于在滚动后强制向右强制文本(顶部链接)起了作用.

问题是页面上的问题,当我垂直滚动时,顶部链接仍保留在页面顶部,即使我向下滚动它们显示在我的主要内容之上.

有什么方法可以强制文本被强制向右,但是当我垂直滚动时不要移动？

今天是我的CSS:

#toplinks ul
{
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    background:transparent none repeat scroll 0 0;
    border:medium none;
    color:#2F6FAB;
    cursor:default;
    line-height:1.4em;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0 1em 0 1em;
    text-align:right;
    z-index:0;
    font-size: 85%;

    position:fixed;
    right:0;
}

Answer 1

我想你想的东西像这样.如果我错了,请纠正我.我编辑了ptriek的代码并对其进行了修复,以便在页面垂直滚动时粘性物质不会移动,但如果页面水平滚动则页面会保持其位置固定.

CSS代码是一样的:

#sticky
{
    background:red;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 206px;
    padding: 0;
    font-size: 0.6875em;
}

p {
    width:1000px;
}

但JavaScript代码略有修改:

$(window).scroll(function(event) {
    $("#sticky").css("margin-top", 0-$(document).scrollTop());
});

或者,这可以在没有JavaScript的情况下完成,正如Aaron所建议的那样.你可以在这里看到效果.

我希望它有效.

Answer 2

z-index在滚动时,您可以使用相对定位的内容覆盖固定内容,例如:http://jsfiddle.net/R4jEj/.