Question

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

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

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

 <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

简而言之：您将绑定到窗口的scroll事件并检查当前scrollTop（从页面顶部到目标的距离）当前位于视口顶部的像素）大于从页面顶部到侧边栏顶部的距离。
如果给出了这个，你将把差值设置为marginTop，使侧边栏保持在可见区域。

请参阅http://css-tricks.com/scrollfollow-sidebar/以获取示例和更多信息。

如何使浮动菜单保持原位，直到您滚动它

1 个答案: