3

スクロール位置を過ぎたときにdivを表示する方法を見つけました。そのために使用している JQuery コードは次のとおりです。

$(window).scroll(function() {
if ($(this).scrollTop() > 75) {
    $("#ddmenubg2:hidden").fadeIn('slow');
}
else {
    $("#ddmenubg2:visible").fadeOut("slow");
}

});

私が知る限り、これは div ddmenubg2 が 75 のスクロール マークに到達する前に非表示になるように指示しており、そのマークを超えると、div は表示されたままになります...そしてそのマークの前にあるものはすべて、div が非表示になります。しかし、何らかの理由で ddmenubg2 div が私のページの 75 ピクセル マークの前にあります。div はフェードアウトし、75 マークを超えると再びフェードインします。これは、最初のページの読み込みまたは更新時にのみ発生し、何度も上下にスクロールした後は正常に機能しますが、ページを更新するたびに、下にスクロールするまでこの問題が発生します。

現在、この問題を簡単に修正するには、ddmenubg2 div の表示を「なし」にします。これにより、スクロールの問題全体が実際に修正されますが、メインメニューが正しく機能しないままになります。

では、75 を超える前に ddmenubg2 div が非表示のままになり、75 を超えるとそのままになるようにするにはどうすればよいでしょうか。最初のページの読み込みまたは更新でも?

4

1 に答える 1

8

表示なしの代わりに、可視性: 非表示を使用します。これにより、要素の幅と高さの属性が保持されますが、表示されなくなります。これが機能するようにコードを変更した方法です。

CSS

#ddmenubg2{
   visibility:hidden;
}

JavaScript

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 75) { 
            $("#ddmenubg2:hidden").css('visibility','visible');   
            $("#ddmenubg2:hidden").fadeIn('slow');  
        } 
        else {     
            $("#ddmenubg2:visible").fadeOut("slow"); 
        }  
    });
});
于 2012-11-18T06:33:54.140 に答える