使用 Bootstrap 进行垂直点导航答案

【问题标题】：Vertical Dot Navigation with Bootstrap使用 Bootstrap 进行垂直点导航
【发布时间】：2015-05-08 14:49:01
【问题描述】：

我正在为单页布局中的部分进行点导航。它目前将转到点击部分。我还能够在悬停时显示标签和点变化。但是我很难让导航在滚动时反映该部分。我已将引导程序添加到 jsfiddle 外部资源并添加了推荐的正文代码，但显然仍然缺少一些东西。任何帮助将不胜感激。

http://jsfiddle.net/carincamen/ram0Ly92/27/

<body data-spy="scroll" data-target=".Vnav">

$(document).ready(function($){
        $('a').click(function(){
            $('html, body').animate({
                scrollTop: $( $.attr(this, 'href') ).offset().top
            }, 500);
            return false;
        });

            $('.vNav ul li a').click(function () {
            $('.vNav ul li a').removeClass('active');
                $(this).addClass('active');
        }); 

       $('.vNav a').hover(function() {
           $(this).find('.label').show();
           }, function() {
           $(this).find('.label').hide();
       });

});

【问题讨论】：

我不确定 bootstrap 提供了哪些开箱即用的功能，但如果它不适合您，您需要绑定到滚动事件并跟踪顶部的更改。看看这个：api.jquery.com/scroll
您考虑过使用fullPage.js 吗？您可以将the vertical navigation option 与autoScrolling:false 结合使用。如果您使用全屏页面，这将做到这一点。否则它可能不是最好的解决方案。
取得进展。只需要最后的润色就可以在页面滚动时填充点。 jsfiddle.net/carincamen/ram0Ly92

标签： javascript jquery twitter-bootstrap navigation

【解决方案1】：

通过大量研究，我能够让所有功能正常工作。最后一个关键是使用 parPosition。这是最终的代码。

http://jsfiddle.net/carincamen/ram0Ly92/

$(document).ready(function($){
      var parPosition = [];
    $('.par').each(function() {
        parPosition.push($(this).offset().top);
    });

    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });

        $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
            $(this).addClass('active');
    }); 

   $('.vNav a').hover(function() {
       $(this).find('.label').show();
       }, function() {
       $(this).find('.label').hide();
   });

       $(document).scroll(function(){
    var position = $(document).scrollTop(),
            index; 
            for (var i=0; i<parPosition.length; i++) {
            if (position <= parPosition[i]) {
                index = i;
                break;
            }
        }
  $('.vNav ul li a').removeClass('active');
        $('.vNav ul li a:eq('+index+')').addClass('active');
    });

        $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
            $(this).addClass('active');
    });   
});

【讨论】：