Question

我在全窗口div中有一个页面。通过点击导航按钮完成导航，我不希望用户能够滚动到div之间的位置，所以我设置overflow：hidden在我的容器上。那部分工作正常。

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不再射击了。如果我转动删除溢出：隐藏，它可以工作，但在那里，它只会在我加载页面时触发一次。

当我使用overflow：hidden？

时，任何想法为什么Waypoints会停止射击

Answer 1

尝试应用溢出：仅隐藏在body元素上，而不是隐藏在html和body元素上。为我工作

如果我使用overflow：hidden，jquery waypoints将不会触发

1 个答案: