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

Question

当我意识到这个"问一个问题"页面上的"如何询问/格式化"侧边栏框完全符合我的要求时,我正在写一篇关于我想做什么的详细描述.

基本上,它与屏幕的其余部分一起向上和向下滚动,与主要部分保持顶部对齐,除非主要部分开始滚动到可见窗口的顶部.此时,侧边栏框停止滚动,并开始表现为绝对位于可见窗口的顶部.

我已经尝试在这个"询问"屏幕上挖掘源代码和脚本,但是有很多事情发生,这几乎是不可能的(对我来说,至少).我假设jQuery实际上使这种事情非常简单,但我是新手,所以我很难为自己搞清楚.(如果这原来是一个常见的问题,我的道歉-我一直在寻找了约一个小时,但也有这样,我一直没能挖了一个答案很多密切措辞jQuery的问题.)

在此先感谢您的帮助.

Answer 1

这是Apple在Applestore Page上购物的例子.

逻辑:

• 检查粘性元素的位置
• 检查顶部窗口所在的滚动事件
• 添加或删除粘性元素的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; }

示例链接