2

こんにちは私はこのナビゲーションバー効果を達成しようとしています：http ：//kettlenyc.com/スクロールダウンすると、ナビゲーションバーが続き、固定位置にアニメーション化されます。ここでコーディングを開始しましたが、アニメーションを機能させることができません：http: //theturning.co.uk/NOAH/

私のJqueryは、現時点では次のようになっています。

$(function() {
var bar = $('#topbar');
var top = bar.css('top');
$(window).scroll(function() {

    if($(this).scrollTop() > 0) {
        bar.stop().css({'position' : 'absolute'});
    }

    if($(this).scrollTop() > 600) {
        bar.stop().animate({'top' : '0px'}, 100).css({'position' : 'fixed'});
    } else {
        bar.stop().animate({'top' : top}, 100);
    }
});
});

そしてCSS：

#topbar {
background: url('../images/bg-topbar.png') left top;
position: absolute;
top: 0;
width: 100%;
height: 50px;
z-index: 999;
padding: 20px 0 20px 0;
}

どんな助けでもいただければ幸いです！ありがとう

4

2 に答える 2

1

また、高さおよび/または不透明度をアニメーション化する必要があります (たとえば、 から までの高さと からまで0pxの50px不透明度)。また、fixedを の前に置くことをお勧めします。01.css({'position':}).animate

bar.stop().css({
    'position': 'fixed'
}).animate({
    'top': '0px',
    'height': '50px',
    'opacity': '1'
}, 100);

また、(CSS を使用して) 高さと不透明度の両方を に設定することを忘れないで0ください。あなたのスクリプトで：

$(function () {
    var bar = $('#topbar');
    var top = bar.css('top');
    $(window).scroll(function () {

        if ($(this).scrollTop() > 0) {
            bar.stop().css({
                'position': 'absolute'
            });
        }

        if ($(this).scrollTop() > 600) {
            bar.stop().css({
                'position': 'fixed'
            }).animate({
                'top': '0px',
                    'height': '50px',
                    'opacity': '1'
            }, 100);
        } else {
            bar.stop().css({
                'position': 'fixed'
            }).animate({
                'top': top,
                    'height': '0',
                    'opacity': '0'
            }, 100);
        }
    });
});

また、CSS に含める必要があります。

#topbar {
    height: 0;
    opacity: 0;
}
于 2013-03-10T16:47:26.687 に答える
0

ここで非常に簡単なのは私のフィドルです：http://jsfiddle.net/hgpd8/4/

ウィンドウスクロールの位置を検出し、ヘッダーの位置よりも大きい場合は、ヘッダーを固定に設定します。または、最初から CSS で修正するだけですが、それほどクールではありません。

いくつかの効果が追加されましたが、機能しています:

if ($("#header").is('*')) {
var elem = $('#header');
var offset = elem.offset();
var leftValue = offset.left;
var topValue =  offset.top + elem.height();
var width = elem.width();
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if (y >= topValue) {  
 if ($('#header').hasClass('fixed')){    
 }else{
    $('#header').addClass('fixed');
    $('#header').css({
        top: '-60px',
        width:width,
    });
     $('#header').animate({ 
    top: '0',
}, 500, function() {    
        });
}
} else {    
if ($('#header').hasClass('fixed')){        
$('#header').removeClass('fixed');
$('#header').fadeOut('fast', function(){ 
 $('#header').fadeIn('fast');
});
    }
    }
  });
}
于 2013-10-08T23:59:38.513 に答える