Scrollspy同时突出显示两个目标,这不是我想要的。我希望它只突出一个。它确实突出了一个,但是当在两个元素之间滚动时,它会突出显示两者。
CSHTML
var guid = Guid.NewGuid();
<script>
$(function() {
setupJumpNav("#@guid");
});
</script>
<div>
<div class="jump-container">
<nav class="jump hide-on-small-only" style="top: 50px;" id="@guid">
<ul class="section @(tabs.Count > 3 ? "center" : "")">
@foreach (var tab in tabs)
{
<li>
<a href="#@tab.Title.Replace(" ", "_").ToLower()">@tab.Title</a>
</li>
}
</ul>
</nav>
</div>
<div class="socialMediaButtons socialMediaCentered"></div>
<div class="container">
@foreach (var tab in tabs)
{
<article class="col s12 section scrollspy" id="@tab.Title.Replace(" ", "_").ToLower()">
@foreach (var contentItem in tab.RealContentItems)
{
@Display(Model.ContentItem.ContentManager.BuildDisplay(contentItem))
}
</article>
}
</div>
</div>
JS:
(function() {
setupJumpNav = function(guid) {
var updatePushpin = function() {
$(guid).pushpin("remove");
var jumpTop = $(guid).parent().offset().top;
$(guid).pushpin({
top: $(".hide-on-med-and-down").css("display") !== "none" ? jumpTop - 25 : jumpTop,
offset: $(".hide-on-med-and-down").css("display") !== "none" ? 75 : 50
});
};
updatePushpin();
$(window).bind("orientationchange resize", updatePushpin);
$(guid).parent().parent().find(".scrollspy").each(function() {
$(this).scrollSpy();
});
};
})(jQuery);
答案 0 :(得分:0)
Scrollspy被多次调用。
$(guid).parent().parent().find(".scrollspy").each(function() {
$(this).scrollSpy();
});
应该是
$(guid).parent().parent().find(".scrollspy").scrollSpy();