当我意识到“如何询问/格式化”侧栏框在这个相同的“提问”页面上时,我正在写出一个关于我想要做的很长的描述,正是我想要的.
基本上,它与屏幕的其余部分一致地上下滚动,与主要部分保持顶部对齐,除非主要部分开始滚动可见窗口的顶部.在这一点上,侧边栏框停止滚动,并开始像绝对定位在可见窗口的顶部.
我已经尝试在这个“询问”屏幕上挖掘源代码和脚本,但是还有很多事情是不可能的(至少对我来说).我假设jQuery实际上使这样的事情变得很简单,但我是新来的,所以我很难想出自己的想法. (如果这是一个常见的问题,我的道歉 – 我一直在寻找大约一个小时,但是有很多紧密的jQuery问题,我无法挖掘一个答案.)
提前感谢任何帮助.
解决方法
这是苹果在苹果商店页面上购物的示例.
逻辑：
>检查粘性元素的位置
>检查顶部窗口的滚动事件
>添加或删除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; }
