Question

最近我找到了myntra.com并因为他们动态的补充工具栏而感到惊讶。转到此链接：http://www.myntra.com/men-casual-shoes并查看侧栏。通常我们通过jquery找到了很多Sticky项目。但如果侧边栏中有大量内容，则无效。

但是在Myntra，他们做得非常好。在Scroll底部，这将粘在底部，在滚动顶部，它将粘在顶部。

这个插件已经可用吗？或者我们如何在Jquery中这样做。？

Answer 1

这应该让你开始使用监视器滚动位置技术：

<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

Answer 2

尝试使用该jquery插件：waypoint

Answer 3

对于精确的Myntra菜单，这可能对您有所帮助 - http://techbrij.com/fixed-sidebar-scrolling-jquery-div

如何创建像Myntra.com这样的Sticky Sidebar（大内容）

3 个答案: