我找到了这个问题的答案无济于事。希望我能从这个社区得到一些帮助！我正在尝试将bootstrap的scrollspy功能添加到我的wordpress网站的导航中。我有一些奇怪的问题与z-index＆＃39;正在考虑可能与它有关。
我想要发生什么： 由于导航栏在滚动后固定为顶部，我想将活动类应用于当前正在滚动的链接。例子=当我滚动过去“参与”＃39;部分，我希望根据我编程的任何css规则突出显示导航栏中的项目。
发生了什么： 活动类仅偶尔应用，而不一定适用于相应的元素。它似乎不是滚动而不是识别滚动的部分的id。
我粘贴在代码的相关部分：
<body class="home blog logged-in admin-bar no-customize-support chrome" data-spy="scroll" data-target=".main-nav">
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '277595855720684',
xfbml : true,
version : 'v2.2'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!--[if lt IE 8]>
<div class="alert alert-warning">
You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.
</div>
<![endif]-->
<style type="text/css">
a.navbar-brand {background-image:url(http://localhost/wp-content/uploads/2015/10/logo_nav.png);}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
a.navbar-brand {background-image:url(http://localhost/wp-content/uploads/2015/10/logo_nav.png);}
}
#p2p, #why-attend, #schedule, #register, #video, #twitter-updates, #attendees, #venue, #venue_head #polls, #quote-two, #quote-three, #quote-four, #home {
z-index: 977 !important;
}
</style>
<div class"vid-background">
<video autoplay loop id="bgvid">
<source src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/Summit-Header-Video-v4.mp4" type="video/mp4">
<source src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/Summit-Header-Video_bw.webm" type="video/webm">
</video>
</div>
<section id="home" style="background-image:url();"><!-- this section closes in home.php-->
<style type="text/css">
.hero-logo {background-image:url(http://localhost/wp-content/uploads/2015/10/cssummit_logo.png);}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
.hero-logo {background-image:url(http://localhost/wp-content/uploads/2015/10/cssummit_logo.png);}
}
/****************************/
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
/****************************/
</style>
<!--<div class="container hero">
<div class="row row-offcanvas">
<div class="col-sm-12 text-center">
<div class="hero-logo center-block"></div><p class="hero-copy">Successes. Failures. Lessons learned. We improve through the collective <strong>Power of Us</strong>. Attend the industry-leading Customer Success event for SaaS and subscription businesses.</p> <a class="btn btn-primary" href="http://events.mfactormeetings.com/12845" target="_blank">Register Now</a>
</div>
</div><!-- /.row -->
<!--</div><!-- /.container -->
<div class="container hero">
<div class="row">
<div class="col-sm-12">
<img class="img-responsive mobile-hide" src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/cssummit-header-logo_03.png" style="position:relative;top:-15px;left:-15px;">
<img class="img-responsive mobile-show" src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/11/mobile-header-large-better.png" style="position:relative;top:-15px;left:-15px;display:none;">
</div>
</div>
</div>
<div id="header-social-mobile" style="display:none;position:relative;top:-295px;left:55px;width:275px;">
<a href="https://www.facebook.com/customersuccesssummit/" target="blank"><img src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/fb_icon.png"></a>
<a href="https://twitter.com/search?q=%23CSSUmmit16&src=typd" target="blank"><img src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/twitter_icon.png"></a>
<a href="" style="display:none;"><img src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/in_icon.png"></a>
</div>
<div id="header-social">
<a href="https://www.facebook.com/customersuccesssummit/" target="blank"><img src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/fb_icon.png"></a>
<a href="https://twitter.com/search?q=%23CSSUmmit16&src=typd" target="blank"><img src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/twitter_icon.png"></a>
<a href="" style="display:none;"><img src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/in_icon.png"></a>
</div>
<div class="col-sm-12 text-center hero-body" style="position: relative;bottom: 40px;">
<h1 class="header-h1" style="clear:both;text-align:center;color:#fff;font-size:52px;">MASTERING THE BUSINESS OF CUSTOMER SUCCESS</h1>
<h2 class="text-center header-h2" style="color:#fff;font-size:40px;">MARCH 21-22 | SAN FRANCISCO</h2>
<h2 class="text-center header-h2-m" style="color:#fff;font-size:40px;display:none;">MARCH 21-22 <br> SAN FRANCISCO</h2>
<a class="btn btn-custom btn-mobile reg-mobile-hide" style="background-color:#b2d33f;margin-top:25px;color:#2f2f2f;padding:17px 50px;" href="#register" >REGISTER NOW</a>
<a class="btn btn-custom btn-mobile reg-mobile-show" style="background-color:#b2d33f;margin-top:25px;color:#2f2f2f;padding:17px 50px;display:none;" href="https://www.eventbrite.com/e/customer-success-summit-2016-registration-19312168215" >REGISTER NOW</a>
<p style="padding-top:40px;"><a href="#nav"><img id="mobile-arrow-hide" src="http://cssummit.staging.wpengine.com/wp-content/uploads/2015/10/arrow_down_hero_image.png"></a></p>
</div>
</section><!-- /#home (opens in header.php)-->
<div id="nav">
<div class="container main-nav">
<nav class="navbar navbar-default navbar-static" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".lower-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand text-hide" href="#home">Customer Success Summit 2015</a>
</div><!-- /.navbar-header -->
<div class="collapse navbar-collapse lower-navbar nav">
<ul id="menu-main-menu" class="nav navbar-nav navbar-right"><li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="#why-attend">Why Attend</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a href="#p2p">Get Involved</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a href="#partners">Sponsor</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#venue_head">Venue</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#register">Register</a></li>
</ul> </div><!-- /.navbar-collapse -->
</nav>
</div>
</div>