0

私はいくつかのjqueryについて助けが必要です。ページの上部に固定ナビゲーションがあり、ページの読み込み時に不透明度が 0 に設定されています。ページを下にスクロールすると、次のようにナビゲーションがフェードインします。

function EasyPeasyParallax() {
    scrollPos = $(this).scrollTop();
$('#nav').css({
        'opacity': 0+(scrollPos/800)
    });
});

ページが上にスクロールされたときにフェードアウトしないようにするにはどうすればよいですか?

if ステートメントでこれを実行しようとしましたが、私の jquery はあまり熱くありません。

前もって感謝します。エド・ニール。

4

2 に答える 2

3

これを使用してください: ( woking jsFiddle )

function EasyPeasyParallax() {
    scrollPos = $(document).scrollTop();
        $('#nav').css({
            'opacity': 0+(Math.min(scrollPos/800,1))
        });
};

$(function(){
    $('body').bind('mousewheel',EasyPeasyParallax);
});

注: マウスホイール イベントを使用しましたが、好きな方法でスクロールを検出できます。Math.min()opacity の値が 1 を超えないように、使用法にも注意してください。

別の注意:見栄えの良いフェード効果jsFiddle.stop().animate()の代わりに使用してください。.css()

于 2013-07-06T19:37:22.547 に答える
1

これを試して：

$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 200){
             $('#nav').fadeIn(1000);   
        }
    });
});

CSSで：

#nav{
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:50px;
    background-color:red;
}

動作中のJSFiddle はこちらにあります。

fadeIn()jquery はクロス ブラウザーの CSS の問題を自動的に処理するため、CSS を手動で変更するよりも を使用する方が適切です。たとえば、opacityIE の場合はalpha(opacity=50)

于 2013-07-06T20:09:10.497 に答える