位置固定到窗口

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