0

ページを下にスクロールするときに、メニューをスムーズにページの上部に移動し、その位置をスティッキーに変更したい。次のコードを使用すると、スクロール時にメニューをフェードインできます。

突然フェードインするのではなく、スムーズに上に移動してそこに固執するにはどうすればよいですか?

これが私のコードです：

jQuery:

$(function(){

    var menu = $('#menu'),
        pos = menu.offset();

        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
                menu.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

});

CSS:

.fixed {
    position: fixed;
    top: -5px;
    left: 0;
    width: 100%;
}

デモ: http://jsfiddle.net/ZzzxL/

4

1 に答える 1

0

jquery 関数からフェードアウトを削除すると、目的が達成されるはずです。

$(window).scroll(function(){
    if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
        menu.removeClass('default').addClass('fixed');
    } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
        menu.removeClass('fixed').addClass('default');
    }
});

例

于 2013-10-11T10:46:15.943 に答える