0

animate() jQuery 関数について少し助けが必要です。

スクロールダウンすると白いバーが少し小さくなり、ページの上部に戻ったときに白いバーが通常に戻ります。スクロールダウンすると問題なく動作しますが、スクロールトップすると白いバーが通常に戻ります遅れて、理由がわかりません。私はそれを望んでいません。できれば、私を助けてください。ありがとうございました！私の英語でごめんなさい。

HTML:

<div id="header">
        <div id="sticky_navigation">
            <div class="container">
              <div class="row-fluid">
                <!-- Logo Block -->
                <div class="span2">
                  <a href="#"><div class="logo1"></div></a>
                </div>

                <!-- Nav Block -->
                <div class="span6">
                  <ul class="nav">
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Faq</a></li>
                    <li><a href="#">Blog</a></li>
                  </ul>
                </div>

                <!-- Contact Block -->
                <div class="span4">
                  <ul class="contact-list pull-right">
                    <li><a href="#"><span class="contact"></span>Contact Us</a></li>
                    <li><a href="#"><span class="cell"></span>(03) 9028 2424</a></li>
                  </ul>
                </div>
              </div>
            </div>
        </div>
    </div><!-- #header -->

CSS:

.header {
    border-bottom: 1px solid #a4a4a4;
}

#sticky_navigation {
    width: 100%;
    z-index: 200;
    background: #fff;
    border-bottom: 1px solid #a4a4a4;
}

.logo1 {
    background-position: 0 -186px ;
    width: 169px;
    height: 27px;
    margin: 30px 0 28px 0;
}

.nav {
    margin:39px 0 0 0px;
}

.nav li {
    float: left;
    margin-left: 25px
}

.nav li a, .contact-list li a {
    text-transform: uppercase;
    text-decoration: none;
    color: #777777;
    font-size: 18px;
    font-weight: bold;
    background-color: none;
}

.nav li a:hover, .nav li a.active {
    color: #000;
    background-color: none;
}

.contact-list {
    margin: 39px 0 0 0;
}

.contact-list li {
    float: left;
}

.contact-list li:first-child {
    margin-right: 32px;
}

.contact, .cell {
    display: block;
    float: left; 
    margin:2px 9px 0 0;
}

.cell {
    background-position: -201px -101px ;
    width: 16px;
    height: 16px;
}

.contact {
    background-position: -178px -101px ;
    width: 19px;
    height: 15px;
}

JS:

var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();


if (scroll_top > sticky_navigation_offset_top) { 
    $('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });

    $( ".logo1" ).animate({ marginTop: '10px' }, 1000);
    $( ".nav" ).animate({ marginTop: '19px'}, 1000);
    $( ".contact-list" ).animate({ marginTop: '19px' }, 1000);

} else {
    $('#sticky_navigation').css({ 'position': 'relative' }); 

    $( ".logo1" ).animate({ marginTop: '30px' }, 1000);
    $( ".nav" ).animate({ marginTop: '39px'}, 1000);
    $( ".contact-list" ).animate({ marginTop: '39px' }, 1000);

}   
    };


sticky_navigation();


$(window).scroll(function() {
     sticky_navigation();
});
4

2 に答える 2

0

jQueryのアニメーション化されたスティッキー ナビゲーションに関する問題の重複の可能性
もあります。

于 2013-08-15T20:32:12.773 に答える