2013-03-15 61 views
0

我有一个页面布置在全窗口的div。导航是通过点击导航按钮完成的,我不希望用户能够滚动到div之间的位置,所以我设置了溢出:隐藏在我的容器上。这部分工作正常。如果我使用溢出jquery waypoints不会触发:隐藏

HTML:

<body> 
    <div id="container"> 
     <div class="slide" id="slide1"> <span class="content">page 1</span> 

     </div> 
     <div class="slide" id="slide2"> <span class="content">page 2</span> 

     </div> 
     <div class="slide" id="slide3"> <span class="content">page 3</span> 

     </div> 
    </div> 
<div id="navigation"> 
    <ul> 
    <li><a href="#slide1" class="navbtn1" class="scroll">&nbsp;</a> 
    </li> 
    <li><a href="#slide2" class="navbtn2" class="scroll">&nbsp;</a> 
    </li> 
    <li><a href="#slide3" class="navbtn3" class="scroll">&nbsp;</a> 
    </li> 
    </ul> 
</div> 
</body> 

而这里的我使用的JavaScript:

$(document).ready(function(){ 
// Make navbtn active when page is scrolled down to slide 
$('#slide1').waypoint(function(down){ 
    $('#main .active').removeClass('active'); // remove the class from the currently selected 
    $('#main a.navbtn1').addClass('active'); // add the class to the newly clicked link 
}); 

$('#slide2').waypoint(function(down){ 
    $('#main .active').removeClass('active'); // remove the class from the currently selected 
    $('#main a.navbtn2').addClass('active'); // add the class to the newly clicked link 
}); 

$('#slide3').waypoint(function(down){ 
    $('#main .active').removeClass('active'); // remove the class from the currently selected 
    $('#main a.navbtn3').addClass('active'); // add the class to the newly clicked link 
}); 
}); 

我确实有烧制代码块时,我向上滚动,但它看起来就像这但是'up'而不是'down'和一个偏移量:-1。

问题是,我使用Waypoints jQuery插件来检测#slide何时位于视口的顶部,并在关联的navbtn上设置活动状态。 Waypoint不再发射。如果我把删除溢出:隐藏,它的工作原理,但在那里,它只会触发一次,当我加载页面。

任何想法为什么Waypoints在我使用overflow时会停止触发:hidden?

回答

0

尝试应用overflow:仅隐藏在body元素上,而不隐藏在html和body元素上。 为我效劳