用jQuery滾動隱藏div

我確定這是一個微不足道的問題，但我似乎無法弄清楚。我試圖淡化邊欄，並且因爲我的網站中有一些邊欄，所以我需要爲它們提供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/

您的幫助，將不勝感激。

來源

2016-06-07 Gavin Friel

你是混合的JavaScript和jQuery –

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

var menu = $("#menu");

或

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

來源

2016-06-07 08:39:02 PierreDuc

你需要使用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財產

來源

2016-06-07 08:44:28

結帳這個它會工作。

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

來源

2016-06-07 08:47:16

正如其他人所說，你聲明一個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(); 
    } 
});

來源

2016-06-07 08:48:50

用jQuery滾動隱藏div

回答

相關問題