用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

回答

相关问题