jquery - 使用 jQuery 在可见窗口内保持滚动对象

Question

当我意识到同一个“提问”页面上的“如何提问/格式”侧边栏框确实可以做的时候，我正在写一份关于我想做的事情的长描述。 我想要什么。

基本上，它与屏幕的其余部分一致地上下滚动，与主要部分保持顶部对齐，除非主要部分开始滚动到可见窗口的顶部。此时，侧边栏框停止滚动，并开始表现为绝对定位，靠在可见窗口的顶部。

我已经尝试在这个“询问”屏幕上深入研究源代码和脚本，但是发生的事情太多了，这几乎是不可能的(至少对我来说)。我假设 jQuery 实际上使这种事情变得非常简单，但我对它很陌生，所以我很难自己弄清楚它。 (如果这是一个常见问题，我很抱歉——我已经搜索了大约一个小时，但是有太多措辞密切的 jQuery 问题，我无法解决挖掘答案。)

预先感谢您的帮助。

Answer 1

这是 Apple 在 Applestore 页面上提供的购物车的示例。

逻辑:

• 检查粘性元素在哪里
• 检查顶部窗口所在的滚动事件
• 添加或删除 CSS 类粘性元素

jQuery:

$(document).ready(function() {  
 // check where the shoppingcart-div is  
 var offset = $('#shopping-cart').offset();  

 $(window).scroll(function () {  
   var scrollTop = $(window).scrollTop(); // check the visible top of the browser  

   if (offset.top<scrollTop) $('#shopping-cart').addClass('fixed');  
   else $('#shopping-cart').removeClass('fixed');  
  });  
});  

CSS:

.fixed {  
        position: fixed;   
        top: 20px;  
        margin-left: 720px;  
        background-color: #0f0 ! important; }

<强> example Link