Question

我确定这是一个微不足道的问题，但我似乎无法弄明白。我试图淡化侧边栏，因为我的网站中有一些，我需要为他们提供Javascript的个人ID。

此代码有效

$(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/

我们将不胜感激。

Answer 1

您必须将其包含在jQuery调用中，以使其成为jQuery对象。否则，它找不到fadeOut和fadeIn函数：

var menu = $("#menu");

或

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

Answer 2

您需要使用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属性

Answer 3

签出它会起作用。

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

Answer 4

正如其他人所提到的，您已经声明了一个JavaScript变量，但正在尝试将其用作jQuery对象。

我个人会接受PierreDuc的回答，但如果你稍微重构你的代码，你可以继续使用vanilla JS声明的变量，但是稍微改变一下变量：

＆＃13;

var test = document.getElementById("test");
$(test).hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="test">
  TEST
</div>

＆＃13;

在您的第二个代码中，这可能如下所示：

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

使用JQuery隐藏Scroll上的Div

4 个答案: