Javascript 卷轴上的fadeIn元素

我试图让我的元素（在本例中称为#position_nav）在用户滚动页面时使用jQuery淡入

这是SASS（仅用于嵌套）

这是我的jQuery

$(document).ready(function(){
    $(window).bind("scroll", function() {
        if ($(this).scrollTop() > 20) {
            $("#position_nav").fadeIn("fast");
        };
});

在我的案例中，我看到了几种使用fadeIn的解决方案，但似乎都不起作用

编辑：

这是我的HTML

<div class="neo_container"> <!-- Container start -->
            <div id="neo_homeimage">    <!-- Brand statement image -->
                <h1 class="neo_homeimage_text"><?php the_field('home_image_text'); ?></h1>
            </div>  <!-- Brand statement image end -->
            <div id="neo_about_section">    <!-- About section start -->
                <div class="neo_text_container">    <!-- About text container -->
                    <h1>About the Grossman Companies, Inc.</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                    <div id="neo_about_button"> <!-- Read more button -->
                        <p>Read More</p>
                    </div>  <!-- Read more button end -->
                </div>  <!-- Text container end -->
            </div>  <!-- About section end -->
            <div id="neo_accord_section">   <!-- Accordion section start -->
                <div>
                    <input id="ac-1" name="accordion-1" type="radio" />
                    <label for="ac-1">Acquisitions</label>
                    <article class="ac-small">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</p>
                    </article>
                </div>
                <div>
                    <input id="ac-2" name="accordion-1" type="radio" />
                    <label for="ac-2">Private Lending</label>
                    <article class="ac-small">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</p>
                    </article>
                </div>
                <div>
                    <input id="ac-3" name="accordion-1" type="radio"/>
                    <label for="ac-3">Brokerage</label>
                    <article class="ac-small">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</p>
                    </article>
                </div>
                <div>
                    <input id="ac-4" name="accordion-1" type="radio"/>
                    <label for="ac-4">Property Management</label>
                    <article class="ac-small">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt</p>
                    </article>
                </div>
            </div>  <!-- Accordion section end -->
            <div id="neo_featprop_section"> <!-- Featured poperties section -->
                <div id="neo_featprop_header">  <!-- Featured properties header -->
                    <h1 class="neo_featprop_headertext">Featured Properties</h1>
                </div>  <!-- Featured properties header end -->
                <div id="neo_featprop_gallery"> <!-- Featured properties gallery start -->
                    <!-- First Row -->
                    <div class="neo_gall_img">
                        <div class="neo_img_overlay"></div> <!-- Darkened overlay -->
                        <div class="neo_gall_textcontainer">    <!-- Text container for indiv. gall img -->
                            <h1>Lorem Ipsum</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="neo_gall_img_button">   <!-- View more button -->
                                <p>View</p>
                            </div>  <!-- View more button -->
                        </div>  <!-- Gall img text container end -->
                    </div>  <!-- Img end -->
                     <div class="neo_gall_img">
                        <div class="neo_img_overlay"></div> <!-- Darkened img overlay -->
                        <div class="neo_gall_textcontainer">    <!-- Text container for indiv. gall img -->
                            <h1>Lorem Ipsum</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="neo_gall_img_button">   <!-- View more button -->
                                <p>View</p>
                            </div>  <!-- View more button -->
                        </div>  <!-- Gall img text container end -->
                    </div>  <!-- Img end -->
                     <div class="neo_gall_img">
                        <div class="neo_img_overlay"></div> <!-- Darkened img overlay -->
                        <div class="neo_gall_textcontainer">    <!-- Text container for indiv. gall img -->
                            <h1>Lorem Ipsum</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="neo_gall_img_button">   <!-- View more button -->
                                <p>View</p>
                            </div>  <!-- View more button-->
                        </div>  <!-- Gall img text container end -->
                    </div>  <!-- Img end -->
                    <!-- Second Row -->
                     <div class="neo_gall_img">
                        <div class="neo_img_overlay"></div> <!-- Darkened img overlay -->
                        <div class="neo_gall_textcontainer">    <!-- Text container for indiv. gall img -->
                            <h1>Lorem Ipsum</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="neo_gall_img_button">   <!-- View more button -->
                                <p>View</p>
                            </div>  <!-- View more button-->
                        </div>  <!-- Gall img text container end -->
                    </div>  <!-- Img end -->
                     <div class="neo_gall_img">
                        <div class="neo_img_overlay"></div> <!-- Darkened img overlay -->
                        <div class="neo_gall_textcontainer">    <!-- Text container for indiv. gall img -->
                            <h1>Lorem Ipsum</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="neo_gall_img_button">   <!-- View more button -->
                                <p>View</p>
                            </div>  <!-- View more button-->
                        </div>  <!-- Gall img text container end -->
                    </div>  <!-- Img end -->
                     <div class="neo_gall_img">
                        <div class="neo_img_overlay"></div> <!-- Darkened img overlay -->
                        <div class="neo_gall_textcontainer">    <!-- Text container for indiv. gall img -->
                            <h1>Lorem Ipsum</h1>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                            <div class="neo_gall_img_button">   <!-- View more button -->
                                <p>View</p>
                            </div>  <!-- View more button-->
                        </div>  <!-- Gall img text container end -->
                    </div>  <!-- Img end --> 
                </div>  <!-- Featured properties gallery end -->
            </div>  <!-- Featured poperties section end -->
            <div id="neo_currnews_section"> <!-- Current news section -->
                <div id="neo_currnews_header">  <!-- Current new header -->
                    <h1 class="neo_currnews_headertext">Current News</h1>
                </div>  <!-- Current news header end-->
                <div id="neo_currnews_content"> <!-- Current news main content -->
                    <div id="neo_currnews_gall">    <!-- Current new gallery -->
                        <div class="neo_currnews_gall_img1">
                            <img src="http://fpoimagery.com/?t=px&w=310&h=225&bg=0ff&fg=000000" />
                            <h2 class="gall_img_text">Property Name</h2>
                            <h2 class="gall_img_text">Leases</h2>
                            <p class="gall_img_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                        </div>
                        <div class="neo_currnews_gall_img2">
                            <img src="http://fpoimagery.com/?t=px&w=310&h=225&bg=ff00&fg=000000" />
                            <h2 class="gall_img_text">Property Name</h2>
                            <h2 class="gall_img_text">Leases</h2>
                            <p class="gall_img_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                        </div>
                        <div class="neo_currnews_gall_img3">
                            <img src="http://fpoimagery.com/?t=px&w=310&h=225&bg=0000cc&fg=000000" />
                            <h2 class="gall_img_text">Property Name</h2>
                            <h2 class="gall_img_text">Leases</h2>
                            <p class="gall_img_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
                        </div>
                    </div>  <!-- Curent news gallery end -->
                    <div id="neo_currnews_panel_a"> <!-- Current news expandable info panel -->
                        <div id="neo_currnews_panel_header">    <!-- Info panel header -->
                            <h2>News</h2>
                            <h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</h2>
                        </div>  <!-- Info panel header end -->
                        <div id="neo_currnews_panel_content">   <!-- Info panel content -->
                            <div class="neo_currnews_panel_column"> <!-- Left column -->
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            </div>  <!-- Left column end -->
                            <div class="neo_currnews_panel_column"> <!-- Middle column -->
                                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                                <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                            </div>  <!-- Middle column end -->
                            <div class="neo_currnews_panel_column2">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            </div>
                        </div>  <!-- Info panel content end -->
                    </div>  <!-- Current news info panel end -->
                    <div id="neo_currnews_panel_b"> <!-- Current news expandable info panel -->
                        <div id="neo_currnews_panel_header">    <!-- Info panel header -->
                            <h2>More News</h2>
                            <h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</h2>
                        </div>  <!-- Info panel header end -->
                        <div id="neo_currnews_panel_content">   <!-- Info panel content -->
                            <div class="neo_currnews_panel_column"> <!-- Left column -->
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            </div>  <!-- Left column end -->
                            <div class="neo_currnews_panel_column"> <!-- Middle column -->
                                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                                <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                            </div>  <!-- Middle column end -->
                            <div class="neo_currnews_panel_column2">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            </div>
                        </div>  <!-- Info panel content end -->
                    </div>  <!-- Current news info panel end -->
                    <div id="neo_currnews_panel_c"> <!-- Current news expandable info panel -->
                        <div id="neo_currnews_panel_header">    <!-- Info panel header -->
                            <h2>News</h2>
                            <h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</h2>
                        </div>  <!-- Info panel header end -->
                        <div id="neo_currnews_panel_content">   <!-- Info panel content -->
                            <div class="neo_currnews_panel_column"> <!-- Left column -->
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            </div>  <!-- Left column end -->
                            <div class="neo_currnews_panel_column"> <!-- Middle column -->
                                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                                <p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                            </div>  <!-- Middle column end -->
                            <div class="neo_currnews_panel_column2">
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                            </div>
                        </div>  <!-- Info panel content end -->
                    </div>  <!-- Current news info panel end -->
                </div>  <!-- Current news content end -->
            </div>  <!-- End current news section -->
        </div> <!-- Container end -->

关于格罗斯曼公司。
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

阅读更多

收购
您的
$（窗口）。绑定
功能未关闭，它应该是：

$(document).ready(function(){
    $(window).bind("scroll", function() {
        if ($(this).scrollTop() > 20) {
            $("#position_nav").fadeIn("fast");
        };
    });
});

一旦您关闭它，它似乎就开始工作了：
在jQuery中，您在一个名为
neo\u position\u nav
的元素中逐渐消失，但在SASS中，它看起来只是标记为
position\u nav
。你确定你使用了正确的选择器吗？刚刚更改了它，我错了这是你的JS还是Sass的问题？如果这是一个JS问题，那么将编译好的CSS与标记一起提供会更有用？是否所有元素都在
#position_nav
中，您能否提供一个与您的问题相关的链接？谢谢您捕捉到了这一点，但它似乎对我来说仍然不起作用。我已经在我的原始帖子中加入了我的HTML和一个指向正在开发中的站点的链接，如果你能看一下的话，看起来你得到了一个
未定义的不是一个函数
错误。在执行任何jQuery函数之前是否包含jQuery？你在用Wordpress吗？尝试在无冲突模式下使用jQuery（将
$
的所有实例替换为
jQuery
），即
$（文档）。就绪（function（）
变为
jQuery（文档）。就绪（function（））
噢，哇，谢谢你，我不知道。是的，这是一个WordPress网站，我对它还是有点陌生。再次感谢你，这是关于WordPress和jQuery无冲突模式的更多信息：
$(document).ready(function(){
    $(window).bind("scroll", function() {
        if ($(this).scrollTop() > 20) {
            $("#position_nav").fadeIn("fast");
        };
    });
});