最近我发现了 myntra.com,并对其动态侧边栏感到惊讶。转到此链接:http://www.myntra.com/men-casual-shoes并查看侧边栏。通常我们通过 jquery 发现了很多 Sticky 元素。但是如果侧边栏中的内容很大,那将不起作用。
但在 Myntra,他们做得很好。在滚动底部,它会粘在底部,在滚动顶部,它会粘在顶部。
是否已经有这样的插件可用?或者我们如何在 Jquery 中这样做。 ?
最佳答案
这应该让您开始使用监视器滚动位置技术:
<html>
<body>
<div id="floatMenu">
</div>
</body>
</html>
jQuery:
var name = "#floatMenu";
var menuYloc = null;
menuYloc = parseInt($("#floatMenu").css("top").substring(0, $(name).css("top").indexOf("px")))
$(window).scroll(function () {
offset = menuYloc + $(document).scrollTop() + "px";
$(name).animate({ top: offset }, { duration: 500, queue: false });
});
CSS:
#floatMenu {
border: 1px solid black;
height: 200px;
position: absolute;
width: 100px;
}
body {height:500px;}
工作示例:jsFiddle
更新:
工作示例 2:jsFiddle
关于jquery - 如何创建像 Myntra.com 这样的粘性侧边栏(大内容),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13745741/