如何使浮动菜单保持在适当的位置，直到滚动到它。

Question

我想做一个固定的菜单。但我只想把它修好，只要我翻过它。其实我想要的就像“如何.”菜单上的问题问部分堆叠溢出。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>

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

Answer 1

简单地说，：，您将绑定到窗口的滚动事件，并检查当前scrollTop (从页面顶部到当前视图顶部像素的距离)是否大于从页面顶部到侧边栏顶部的距离。

如果这是给定的，您将将差异设置为marginTop，以使侧边栏停留在可见区域。

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