Question

我正在学习如何使用CSS和jQuery创建一个粘性条。

代码有点脏，为了使粘条工作，我需要一个长页面。您可以看到代码here。

要重播这个问题，你需要按照我说的去做。

1）在最新的Firefox或Chrome中打开页面。

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

3）拖动任何你想要的滚动条，问题就会消失。

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

那真的不是我想要的粘性棒。我不希望第2步中的内容出现。

Answer 1

根据w3schools，您不必提供sticky_bar元素visibility: hidden;，而是必须将其设为display: none;。

注意：slideDown（）适用于使用jQuery方法隐藏的元素，并且在CSS中显示：none（但不是可见性：隐藏）。

您可以查看完整编辑的代码here或在下方运行以查看行为上的差异。

＆＃13;

$(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");
                }
        });

});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

为什么我的粘条不稳定？

1 个答案: