gpt4 book ai didi

jquery - 如何创建像 Myntra.com 这样的粘性侧边栏(大内容)

转载 作者:太空宇宙 更新时间:2023-11-04 15:28:06 24 4
gpt4 key购买 nike

最近我发现了 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com