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

标签 jquery html css sticky

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

相关文章:

javascript - 在没有任何html标签的html中隐藏文本

html - 垂直居中对齐文本

javascript - 两个div切换,将多个javascript点击钩子(Hook)合并为一个

javascript - 将 Javascript 对象成员连接在一起?

css - Div "default margins"不知从何而来

javascript - css - 如何处理选项卡中的折叠边框

html - 如何使用 CSS 缩进多个级别的 select optgroup?

jquery - 如何保证 ajax 响应会被缓存?

javascript - 使用 PhantomJS 选择时 JQuery 不是 "clicking"

javascript - 使用链接或按钮触发 JVectorMap 向下钻取