Question

我有一个小问题，我用一个完全有效的CSS3动画制作了一个持久的标题。但是在我向下滚动之后，内容就消失了。我希望你们能得到我，因为我不知道另一种方式来解释这一点。

这是我的HTML代码：

<section id="container" class="container">
    <header>
        <section class="inner">
            <section class="row">
                <section class="five columns"><!--LOGO SPOT-->
                        LOGO
                </section><!--//LOGO SPOT-->
                <section class="seven columns"><!--MENU SPOT-->
                    <nav>
                        <li><a href='#'>Homepage</a></li>
                        <li><a href='#'>Services</a></li>
                        <li><a href='#'>About Us</a></li>
                        <li><a href='#'>Contact</a></li>
                    </nav>
                </section><!--//MENU SPOT-->
            </section>
        </section>
    </header>
    <main>
        <section class="row content">
            <section class="twelve columns jumbotron">
                asd
            </section>
            <section class="inner">
                <section class="row">
                    <section class="three columns">
                        Feature #1
                    </section>
                    <section class="three columns">
                        Feature #2
                    </section>
                    <section class="three columns">
                        Feature #3
                    </section>
                    <section class="three columns">
                        Feature #4
                    </section>
                </section>
            </section>
        </section>
    </main>
    <footer>

    </footer>
</section>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="<?php SYS_PATH; ?>js/header.js" type="text/javascript"></script>

这是我的CSS代码：

header {
height: 85px;
background: #335C7D;
width: 100%;

-webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
}

header.sticky {
position: fixed;
height: 48px; 
background: #efc47D;
}

这是我的JQuery代码：

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
} else {
    $('header').removeClass("sticky");
}
});

那么滚动会发生什么？之前：http://prntscr.com/76payg 之后：http://prntscr.com/76pb5j

正如您在滚动条中看到的那样，我只是滚动了一小毫米。

我希望有人可以帮助我，谢谢你。

持久标题问题（JQuery＆amp; CSS3）

0 个答案: