2016-06-07 130 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(); 
    } 
});