Question

我有一个Tumblr帐户，我正在编辑它的html。我的问题是：如何让我的侧栏处于某个位置，但是当我向下滚动页面时，它会保持在相对于我的浏览器的位置？举一个我正在谈论的例子，点击提问并查看“类似问题”然后滚动。我更喜欢它在CSS中。我已经尝试过我能想到的一切。

http://snipt.org/AGff7

这是我开始使用的代码，加上我在<style>

末尾的自定义CSS

我已经尝试过position:fixed。

我希望它在浏览器窗口的中间开始，然后当我向下滚动时，它会碰到窗口的顶部并相对于窗口保持固定。

Answer 1

你肯定需要使用JS，因为CSS无法检测滚动。这是一个基本的例子：

<div id="scroller" class="floating"></div>

这是我们的原始元素，它已经部分在页面下方并且在中间浮动。风格如

.floating{
  margin-top: 50px;
}

然后我们需要使用Javascript来衡量用户何时向下滚动（我使用jQuery完成此操作）

$(window).scroll(function(){
    if($(this).scrollTop() > 50){
        $('#scroller').removeClass('floating');
        $('#scroller').addClass('fixed');
    }else{
        $('#scroller').addClass('floating');
        $('#scroller').removeClass('fixed');
    }
});

你有一个替代的CSS声明，如

.fixed{
    position: fixed;
}

固定在窗口的位置

1 个答案: