0
我試圖讓我的元素在這種情況下稱爲#position_nav，只要用戶滾動頁面就會淡入使用jQuery。淡入淡出元素
這裏是SASS（僅用於嵌套）
#position_nav {
position: fixed;
width: 150px;
height: 200px;
background: #CCC;
color: #000;
top: 50%;
right: 0;
margin-top: -75px;
z-index: 500;
display: none;
/* Styling for navigation list */
ul {list-style: none; padding-left: none; font-size: 14px;}
li {
background: #FFF;
margin: 10px 0 0 -40px;
cursor: pointer;
a {
/* Formatting for list items */
&:link {text-decoration: none; color: #FFFFFF;}
&:hover {color: #CCC;}
&:active {color: #222;}
&:visited {text-decoration:none; color: #FFF;}
}
}
}
這裏是我的jQuery
$(document).ready(function(){
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 20) {
$("#position_nav").fadeIn("fast");
};
});
我已經看到了幾種解決方案，以我的情況下，使用淡入，但沒有似乎工作。
編輯：
這裏是我的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 -->
鏈接到網站的發展http://neoscapelabs.com/projects/grossman_corp/
在jQuery中，你正在消失一個名爲'neo_position_nav'的元素，但是在你的SASS中，它看起來像只是標記爲'position_nav'。你確定你使用了正確的選擇器嗎？ – APAD1 2014-09-19 17:03:18
只是改變了它，我的錯誤 – 2014-09-19 17:05:14
這是你的JS或Sass的問題嗎？如果這是一個JS問題，那麼將編譯的CSS和標記一起提供會更有用。 – cimmanon 2014-09-19 17:06:10