entityMap|blocks|key|bc6hq|text|要使其成为jQuery对象，必须将其包装在jQuery调用中。否则，它将无法找到fadeOut和fadeIn函数：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|ddbhe|var+menu+=+$("#menu");|code-block|syntax|javascript|bt76h|或者|fsn1i|var+menu+=+$(document.getElementById("menu"));|a230t^0|5|6|L|6|14|7|1C|6|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@$A|R|B|S|C|D]|$A|T|B|U|C|D]|$A|V|B|W|C|D]|$A|X|B|Y|C|D]]|E|@]|F|$]]|$2|G|4|H|6|I|8|Z|9|@]|E|@]|F|$J|K]]|$2|L|4|M|6|7|8|10|9|@]|E|@]|F|$]]|$2|N|4|O|6|I|8|11|9|@]|E|@]|F|$J|K]]|$2|P|4|-4|6|7|8|12|9|@]|E|@]|F|$]]]]

<p>You have to wrap it in a <code>jQuery</code> call to make it a <code>jQuery</code> object. Otherwise it cannot find the <code>fadeOut</code> and <code>fadeIn</code> functions:</p>

<pre><code>var menu = $("#menu");
</code></pre>

<p>or</p>

<pre><code>var menu = $(document.getElementById("menu"));
</code></pre>


entityMap|blocks|key|ethk1|text|您需要使用jquery将menu转换为jQuery对象。因此，它将具有fade属性|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7qf2j|$(window).on("scroll",+function()+{
++++var+menu+=+document.getElementById("menu");
++++var+scrollPos+=+$(window).scrollTop()+-+100+;
++++if+(scrollPos+<+100)+{
++++++++$(menu).fadeOut();
++++}+else+{
++++++++$(menu).fadeIn();
++++}
});|code-block|syntax|javascript|7l1r8|因为如果您使用menu.fadeOut()，它将生成错误，因为menu没有fade属性|offset|length|style|CODE|8587j^0|0|0|7|E|V|4|11|4|0^^$0|$]|1|@$2|3|4|5|6|7|8|O|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|P|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|Q|9|@$J|R|K|S|L|M]|$J|T|K|U|L|M]|$J|V|K|W|L|M]]|A|@]|B|$]]|$2|N|4|-4|6|7|8|X|9|@]|A|@]|B|$]]]]

<p>You need to use jquery to convert menu to jQuery object.
So it will have the fade property</p>

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

<p>Because if you use <code>menu.fadeOut()</code> it will generate error because <code>menu</code>doesn't have <code>fade</code> property</p>


entityMap|blocks|key|dfg15|text|看看这个，它会起作用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e8nl|+$(window).on("scroll",+function()+{
++++var+menu+=+$("#menu");
++++++++var+scrollPos+=+$(window).scrollTop()+-+100+;
++++++++if+(scrollPos+<+100)+{
++++++++++++menu.fadeOut();
++++++++}+else+{
++++++++++++menu.fadeIn();
++++++++}
++++});|code-block|syntax|javascript|fap23^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|J|9|@]|A|@]|B|$F|G]]|$2|H|4|-4|6|7|8|K|9|@]|A|@]|B|$]]]]

<p>Checkout this it will work.</p>

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


entityMap|blocks|key|5mvl9|text|正如其他人所提到的，您声明了一个JavaScript变量，但试图将其用作jQuery对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1taqe|我个人同意PierreDuc的答案，但如果你稍微重构你的代码，你可以继续使用声明为vaiable的普通JS，但传递变量的方式略有不同：|aglm3|​|2ineb|var+test+=+document.getElementById("test");
$(test).hide();|code-block|syntax|javascript|3gtu3|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div+id="test">
++TEST
</div>|4adsu|dg1sb|在您的第二个代码中，这可能如下所示：|2m42g|$(window).on("scroll",+function()+{
++++var+menu+=+document.getElementById("menu");
++++var+scrollPos+=+$(window).scrollTop()+-+100+;
++++if+(scrollPos+<+100)+{
++++++++$(menu).fadeOut();
++++}+else+{
++++++++$(menu).fadeIn();
++++}
});|1clla^0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|W|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|I|8|X|9|@]|A|@]|B|$J|K]]|$2|N|4|F|6|7|8|Y|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|Z|9|@]|A|@]|B|$]]|$2|Q|4|R|6|I|8|10|9|@]|A|@]|B|$J|K]]|$2|S|4|-4|6|7|8|11|9|@]|A|@]|B|$]]]]

<p>As others have mentioned, you've declared a JavaScript variable but are trying to use it as a jQuery object.</p>

<p>I would personally go with PierreDuc's answer but if you refactor your code slightly you can carry on using the vanilla JS declared vaiable, but pass the variable slightly differently:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var test = document.getElementById("test");
$(test).hide();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="test"&gt;
  TEST
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>In your 2nd code, this might look as follows:</p>

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


<p>I'm sure this is a trivial problem but I cannot seem to figure it out. I'm trying to fade a side bar in and out, and because I have a few of them in my website, I need to give them individual IDs for Javascript. </p>

<p>This code works</p>

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

<p>This doesn't </p>

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

<p>In the latter piece, all I'm trying to do is assign a variable. </p>

<p>Here's the fiddle: <a href="https://jsfiddle.net/gavinfriel/nhovvj6q/1/" rel="nofollow">https://jsfiddle.net/gavinfriel/nhovvj6q/1/</a></p>

<p>Your help would be appreciated. </p>


Hide Div on Scroll with JQuery

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我确信这是一个微不足道的问题，但我似乎弄不明白。我正在尝试淡入和淡出一个侧边栏，因为我的网站上有几个侧边栏，我需要为他们提供Javascript的个人in。 这段代码可以工作 $(window).on("scroll", function() {    var scrollPos = $(window).scroll...

问使用JQuery隐藏滚动页面
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用JQuery隐藏滚动页面EN