1

最近、myntra.com を見つけて、そのダイナミックなサイドバーに驚かされました。このリンク : http://www.myntra.com/men-casual-shoesにアクセスし、サイドバーをチェックしてください。通常、jquery 経由で多くのスティッキー アイテムが見つかります。ただし、サイドバーのコンテンツが大きい場合、それは機能しません。

しかし、Myntra では、彼らはそれをうまくやり遂げました。スクロールボトムでは下にくっつき、スクロールトップでは上にくっつきます。

このようなプラグインはすでに利用可能でしたか? またはJqueryでこれを行う方法。?

4

3 に答える 3

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

于 2012-12-06T14:49:08.720 に答える
0

そのjqueryプラグインを試してみてください：waypoint

于 2012-12-06T14:40:00.587 に答える
0

正確な Myntra のようなメニューについては、これが役立つかもしれません - http://techbrij.com/fixed-sidebar-scrolling-jquery-div

于 2013-02-12T15:10:22.017 に答える