2016-07-13 4 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

Эй, Праньял, посмотри на него сейчас – Tiger

+0

Возможный дубликат [Twitter Bootstrap scrollspy всегда выбирает последний элемент] (http://stackoverflow.com/questions/12095579/twitter-bootstrap-scrollspy-always-selecting-last-element) –

ответ

1

Check this working fiddle

Попробуйте воспользоваться функцией. affix с некоторым смещением и добавьте .page-scroll класс для элемента, который будет прокручиваться.

Ваш 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 
    } 
}); 

}); 
Смежные вопросы