0

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

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
}); 
});

当我向上滚动时,我确实有一段代码用于触发,但它看起来就像这样,但使用“向上”而不是“向下”和偏移量:-1。

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

知道为什么当我使用溢出时航点会停止发射:隐藏吗?

4

1 回答 1

0

尝试应用 overflow:hidden 仅在 body 元素上,而不是在 html 和 body 元素上。为我工作

于 2013-10-03T08:44:48.923 回答