2016-06-07 472 views
0

我確定這是一個微不足道的問題,但我似乎無法弄清楚。我試圖淡化邊欄,並且因爲我的網站中有一些邊欄,所以我需要爲它們提供JavaScript的單個ID。用jQuery滾動隱藏div

此代碼的工作

$(window).on("scroll", function() { 
    var scrollPos = $(window).scrollTop() - 100 ; 
    if (scrollPos < 100) { 
     $("#menu").fadeOut(); 
    } else { 
     $("#menu").fadeIn(); 
    } 
}); 

這不

$(window).on("scroll", function() { 
    var menu = document.getElementById("menu"); 
    var scrollPos = $(window).scrollTop() - 100 ; 
    if (scrollPos < 100) { 
     menu.fadeOut(); 
    } else { 
     menu.fadeIn(); 
    } 
}); 

在後面的一塊,所有我想要做的就是指定一個變量。

這裏的小提琴:https://jsfiddle.net/gavinfriel/nhovvj6q/1/

您的幫助,將不勝感激。

+0

你是混合的JavaScript和jQuery –

回答

3

您必須將其包裝在jQuery調用中才能使其成爲jQuery對象。否則找不到fadeOutfadeIn功能:

var menu = $("#menu"); 

var menu = $(document.getElementById("menu")); 
0

你需要使用jQuery菜單轉換爲jQuery對象。 所以它會褪色性能

$(window).on("scroll", function() { 
    var menu = document.getElementById("menu"); 
    var scrollPos = $(window).scrollTop() - 100 ; 
    if (scrollPos < 100) { 
     $(menu).fadeOut(); 
    } else { 
     $(menu).fadeIn(); 
    } 
}); 

因爲如果你使用menu.fadeOut()它會產生錯誤,因爲menu沒有fade財產

0

結帳這個它會工作。

$(window).on("scroll", function() { 
    var menu = $("#menu"); 
     var scrollPos = $(window).scrollTop() - 100 ; 
     if (scrollPos < 100) { 
      menu.fadeOut(); 
     } else { 
      menu.fadeIn(); 
     } 
    }); 
0

正如其他人所說,你聲明一個JavaScript變量,但試圖把它作爲一個jQuery對象。

我會親自去與PierreDuc的答案,但如果你重構你的代碼稍微您可以使用香草JS宣佈vaiable攜帶,但通過可變略有不同:

var test = document.getElementById("test"); 
 
$(test).hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="test"> 
 
    TEST 
 
</div>

在你的第二個代碼,這可能看起來如下:

$(window).on("scroll", function() { 
    var menu = document.getElementById("menu"); 
    var scrollPos = $(window).scrollTop() - 100 ; 
    if (scrollPos < 100) { 
     $(menu).fadeOut(); 
    } else { 
     $(menu).fadeIn(); 
    } 
});