html - 如何避开位置: fixed from staying on the screen when vertical scrolling?

Question

我asked this 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

我想你想要像 this 这样的东西.如果我错了，请纠正我。我编辑了 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());
});

或者，这可以像 Aaron 所建议的那样在没有 JavaScript 的情况下完成。可以看到效果 here .

我希望它有用。