【发布时间】：2015-08-24 01:51:28
【问题描述】：
我试图使用滚动间谍在单页滚动和粘性导航上向ul li 添加一个活动类，由于某些未知原因，我无法在我的项目中使用这项工作。
以下是我的菜单布局：
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<nav class="navbar navbar-default navbar-fixed-top my-nav" role="navigation">
<div class="container_full height">
<div class="navbar-header page-scroll height">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo-holder">
<img class="" src="img/logo-p.png"/>
<span>
<a class="page-scroll" href="#home-page">xxxxxx</a>
<i>xxxxxxx</i>
</span>
</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse height">
<ul class="nav navbar-nav height">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#home-page">item1</a>
</li>
<li>
<a class="page-scroll" href="#item2">item2</a>
</li>
<li>
<a class="page-scroll" href="#item3">item3</a>
</li>
<li>
<a class="page-scroll" href="#item4">item4</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container_full" id="site">
<section class="parallax">
<!-- HOME PAGE DISPLAY -->
<div id="home-page" class="home-g height-650">
<div class="parallax-layer parallax-back height-650" >
<div class="home">
</div>
//many divs css parallax--
nav js文件如下：
$('.parallax').scroll(function() {
if ($('.parallax').scrollTop() > 100) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
$(".my-nav").addClass("nav-resize");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
$(".my-nav").removeClass("nav-resize");
$(".moveLogo").removeClass("moveLogo-resize");
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
var position = $($anchor.attr('href')).offset().top + $('.parallax').scrollTop() ;
$('html,body,.parallax').stop().animate({
scrollTop: position
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
如果我在没有视差 div 等的情况下使用上述方法，这将没有问题，但目前 li 类始终在 最后一个 li 项目上处于活动状态> 向下滚动页面时。
green = 父容器“蓝色”内的可滚动内容，绿色 div 用于定位 id。
.blue{
height:100%;
width:100%;
overflow:hidden;
}
.green // Has many divs
我尝试了明显的目标绿色 > div，但它似乎不起作用。
【问题讨论】：
-
创建一个jsfiddle怎么样？这可能会帮助人们帮助你
-
我不明白，你好像没有使用Boostrap的
scrollspy函数？ -
从我在文档中阅读的内容来看，我仅限于相对定位。由于视差使用绝对定位，我需要创建脚本来检测 div 并根据需要放置 ul li 类。 js fiddle这个时候会很长提供。
标签： jquery html css twitter-bootstrap