I want to do 2 things -- change section of page on scroll (on scroll down next section appears, on scroll up previous) like this jsFiddle , and fade in menu when scroll down > 100px
. The problem is that in both situations, I should use the scrollTop()
method, which always returns 0
. For example, when I try to fade in the menu background:
$(function() {
$('body').on('scroll', function () {
if ($(this).scrollTop() > 100) {
$('.hidden-white-bg').fadeIn();
}else{
$('.hidden-white-bg').fadeOut();
}
});
});
When I try to scroll down, the menu doesn't appear. Here's my main markup:
<div id="landing-wrapper" class="full-screen-element">
<section id="main-sectcion" class="full-screen-element">....</section>
<section id="all-possible" class="full-screen-element">....</section>
<section id="location" class="full-screen-element">....</section>
<section id="everything-provide" class="full-screen-element">....</section>
<section id="main-slider" class="full-screen-element">....</section>
</div>
I have the same code as in that jsFiddle, but when I try to scroll nothing happens (scroll doesn't work at all!) and no error in console.
I guess styles causes this problem (not sure, but anyway). I added the full-screen-element
class to each element to make them 100% height:
.full-screen-element{
height:100%;
min-height:100%;
height:auto !important;
}
I also tried to use jQuery Mouse Wheel but same problem there.
最终发现,问题是因为body
元素overflow: hidden
,将其设置为visible
并可以工作
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.