0

我想做一个固定的菜单。但我希望它只有在我滚动过去时才能修复。实际上我想要它就像问题上的“如何......”菜单询问stackoverflow的一部分。https://stackoverflow.com/questions/ask

我以为你需要 jquery 来做这些事情，但我真的不太了解 jquery。

我将此代码用于菜单，我希望它浮动。所以整个侧边栏 div 需要浮动。：

 <div id="sidebar">
     <div>
        <h2 class="title">Sites</h2>
            <ul>
                <li><a>first li</a></li>
                <li><a>second li</a></li>
                <li><a>third li</a></li>
        </ul>   
    </div>
    <div>
        <h2 class="title">Sites</h2>
            <ul>
                <li><a>first li</a></li>
                <li><a>second li</a></li>
                <li><a>third li</a></li>
            </ul>   
    </div>
</div>

我知道如何让它浮动到页面顶部，但我希望它浮动在包装器中。

我希望你们能帮助我。

编辑

现在我有这个代码的浮动菜单：

<script type="text/javascript">
    $(function() {
        var offset = $("#sidebar").offset();
        var topPadding = 15;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#sidebar").stop().animate({
                    marginTop: $(window).scrollTop() - offset.top + topPadding
                });
            } else {
                $("#sidebar").stop().animate({
                    marginTop: 0
                });
            };
        });
    });
</script>

但是当我向下滚动时，会有一个非常烦人的反弹效果。有没有办法消除这种影响？

4

1 回答 1

2

简而言之：您将绑定到窗口的滚动事件并检查当前的滚动顶部（从页面顶部到当前视口顶部的像素的距离，以像素为单位）是否大于与顶部的距离页面到侧边栏的顶部。
如果给出此值，您将设置差异为 marginTop 以使侧边栏保持在可见区域中。

有关示例和更多信息，请参见http://css-tricks.com/scrollfollow-sidebar/ 。

于 2013-10-15T19:34:24.703 回答