16

ユーザーが上下にスクロールしたときにナビゲーション バーを非表示/表示する

これが私が達成しようとしている例です: http://haraldurthorleifsson.com/ または http://www.teehanlax.com/story/readability/

ナビゲーション バーは、下にスクロールすると画面から上にスライドし、上にスクロールすると画面上で下にスライドします。フェードイン/フェードアウトでそれを行う方法を理解しましたが、例とまったく同じアニメーションで実現したいと思います。注: 私はすでに SlideIn() を試しましたが、ストレッチ アニメーションを行う方法が気に入っています...

Jクエリ:

var previousScroll = 0,
headerOrgOffset = $('#header').offset().top;

$('#header-wrap').height($('#header').height());

$(window).scroll(function() {
    var currentScroll = $(this).scrollTop();
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset);
    if(currentScroll > headerOrgOffset) {
        if (currentScroll > previousScroll) {
            $('#header').fadeOut();
        } else {
            $('#header').fadeIn();
            $('#header').addClass('fixed');
        }
    } else {
         $('#header').removeClass('fixed');   
    }
    previousScroll = currentScroll;
});

CSS:

#header {
    width: 100%;
    z-index: 100;
}

.fixed {
    position: fixed;
    top: 0;
}

#header-wrap {
    position: relative;
}

HTML:

    <div id="header-wrap">
    <div id="header" class="clear">
        <nav>
            <h1>Prototype</h1>
        </nav>
    </div>
</div>
4

6 に答える 6

2

どのnavbar要素を使用する場合でも、そのtransition: transform 0.3s上に a を含め、基数transformを 0 にする必要があります。

#navbar {
    position: fixed;
    right: 0; left: 0; top: 0; 
    /* your height */
    height: 40px;
    /* .... */
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: transform .3s;
    transition: transform .3s;
}
#navbar.scrolled {
    /* subtract your height */
    -webkit-transform: translate3d(0,-40px,0);
    -moz-transform: translate3d(0,-40px,0);
    transform: translate3d(0,-40px,0);
}

次に、JavaScript でユーザーのスクロールを監視する必要があります。

;(function (){
    var previousScroll = 0;
    var navbar = document.getElementById('navbar'),
        navClasses = navbar.classList; // classList doesn't work <IE10

    window.addEventListener('scroll', function(e){
       var currentScroll = window.scrollY;
       var isDown = currentScroll > previousScroll;

       if ( isDown && !navClasses.contains('scrolled') ){
          // scrolling down, didn't add class yet
          navClasses.add('scrolled'); // we hide the navbar
       } else if ( !isDown ){
          // scrolling up
          navClasses.remove('scrolled'); // won't error if no class found
       }

       // always update position
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately
于 2015-02-09T02:49:47.500 に答える
1

ヘッドルーム js を試してください。

また、CSS クラスを編集してトランジション効果を展開することもできます。

http://wicky.nillia.ms/headroom.js

于 2016-03-26T12:24:48.373 に答える