问为什么我的粘棒不稳定？
EN

Stack Overflow用户

提问于 2014-11-22 12:04:23

回答 1查看 68关注 0票数 0

我正在学习如何使用CSS和jQuery制作粘条。

代码有点脏，因为为了让粘条正常工作，我需要一长一页。您可以看到代码这里。

要重播这个问题，你得照我说的做。

1)在最新的Firefox或Chrome浏览器中打开页面。

2)将浏览器的滚动条直接拖到页面的末尾(不要停在中间)。你会看到粘条向下滑动，然后向上滑动，最后向下滑动。

3)任意拖动滚动条，问题就会消失。

4)然后刷新页面，在步骤2中执行相同的操作，您将再次看到问题

那真的不是我想要的粘条。我不想让第二步的东西出现。

javascript

html

css

运维排障定位快人一步

一站式日志服务平台---日志服务 CLS，智能化配置、开箱即用，协助解决业务运维、服务监控、用户行为分析、日志审计等场景诉求。

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-22 14:05:50

根据w3schools的说法，与其给出sticky_bar元素visibility: hidden;，不如将其设置为display: none;。

注意: slideDown()处理jQuery方法隐藏的元素，并显示: CSS中没有(但不可见性:隐藏)。

您可以看到完整编辑的代码http://pastebin.com/e70ctVGy，也可以在下面运行以查看行为上的差异。

$(document).ready(function()
{
        $(window).scroll(function()
        {
                if($(window).scrollTop() >= 60)
                {
                        $(".sticky_bar").slideDown("slow")
                        $(".sticky_bar").addClass("sticky_bar_active");
                }
                else
                {
                        $(".sticky_bar").slideUp("slow");
                        $(".sticky_nav").removeClass("sticky_bar_active");
                }
        });

});

.sticky_bar p {
        display: inline;
        font-size: 13px;
        padding-right: 6px;
}

.sticky_bar a {
        text-decoration: none;
        float: left;
}

.sticky_bar {
        display: none;
        position: fixed;  
        width: 100%;  
        height: 65px;
        left: 0;  
        top: 0;  
        z-index: 100;  
        border-top: 0;

        margin: 0;
        border: 0;
        padding: 0;
        background-color: #000000;
}

.sticky_bar_active {
        position: fixed;  
        width: 100%;  
        height: 65px;
        left: 0;  
        top: 0;  
        z-index: 100;  
        border-top: 0;  
}

.sticky_text {
        color: #FFFFFF;
}

.wrapper {
        width: 1170px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        </head>
<body>
        <nav class='sticky_bar'>
                <ul class='wrapper'>
                        <li>
                                <a href='#'><div class='sticky_text'><p>Overview</p></div></a>
                        </li>
                        <li>
                                <a href='#'><div class='sticky_text'><p>Details</p></div></a>
                        </li>
                        <li>
                                <a href='#'><div class='sticky_text'><p>Settings</p></div></a>
                        </li>
                </ul>
        </nav>
        <ul>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
                <li>Hello</li>
        </ul>
</body>
</html>