2016-07-13 71 views
1

我找不出錯在哪裏,爲什麼只有滾動時才選擇最後一個部分。Twitter Bootstrap Scrollspy總是突出顯示最後一個元素

<body data-spy="scroll" data-target="#homeToolbar" data-offset="50"> 
    <nav class="navbar navbar-default navbar-fixed-top" id="homeToolbar"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Testing</a> 
     </div> 
     <div> 
     <div class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav pull-right"> 
      <li><a href="#section2">Home</a></li> 
      <li><a href="#section3">Product</a></li> 
      <li><a href="#section4">Team</a></li> 
      <li><a href="#section5">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    </nav> 
</body> 
+0

下面是我的代碼? – Pranjal

+0

嘿Pranjal,現在看看它 – Tiger

+0

可能重複[Twitter Bootstrap Scrollspy總是選擇最後一個元素](http://stackoverflow.com/questions/12095579/twitter-bootstrap-scrollspy-always-selecting-last-element) –

回答

1

Check this working fiddle

嘗試使用的功能。 加上加上一些偏移量並加上.page-scroll class to要滾動的元素。

你的Jquery應該有點像這樣的(基於以上小提琴)

//jQuery for page scrolling feature - requires jQuery Easing plugin 
$(function() { 

// jQuery for page scrolling feature - requires jQuery Easing plugin 
$('a.page-scroll').bind('click', function(event) { 
    var $anchor = $(this); 
    $('html, body').stop().animate({ 
     scrollTop: ($($anchor.attr('href')).offset().top - 50) 
    }, 1250, 'easeInOutExpo'); 
    event.preventDefault(); 
}); 

// Highlight the top nav as scrolling occurs 
$('body').scrollspy({ 
    target: '.navbar-fixed-top', 
    offset: 51 
}); 

// Closes the Responsive Menu on Menu Item Click 
$('.navbar-collapse ul li a:not(.dropdown-toggle)').click(function() { 
    $('.navbar-toggle:visible').click(); 
}); 

// Offset for Main Navigation 
$('#mainNav').affix({ 
    offset: { 
     top: 100 
    } 
}); 

}); 
相關問題