Javascript 带引导的垂直点导航_Javascript_Jquery_Twitter Bootstrap_Navigation

Javascript 带引导的垂直点导航

javascript jquery twitter-bootstrap navigation

Javascript 带引导的垂直点导航,javascript,jquery,twitter-bootstrap,navigation,Javascript,Jquery,Twitter Bootstrap,Navigation,我正在为单页布局中的各部分设计一个点导航。它当前将转到单击的部分。我还能够得到标签和点的变化，以显示在悬停。但我很难让导航在滚动时反映出该部分。我已经将引导添加到JSFIDLE外部资源中，并添加了推荐的主体代码，但显然还缺少一些东西。如蒙协助，将不胜感激 $（文档）.ready（函数（$）{ $（'a'）。单击（函数（）{ $（'html，body'）。设置动画({ scrollTop:$（$.attr（此'href'））.offset（）.top }, 500); 返回false； });

我正在为单页布局中的各部分设计一个点导航。它当前将转到单击的部分。我还能够得到标签和点的变化，以显示在悬停。但我很难让导航在滚动时反映出该部分。我已经将引导添加到JSFIDLE外部资源中，并添加了推荐的主体代码，但显然还缺少一些东西。如蒙协助，将不胜感激


$（文档）.ready（函数（$）{
$（'a'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（$.attr（此'href'））.offset（）.top
}, 500);
返回false；
});
$（'.vNav ul li a'）。单击（函数（）{
$（'.vNav ul li a'）.removeClass（'active'）；
$（this.addClass（'active'）；
}); 
$（'.vNav a'）.hover（函数（）{
$（this.find（'.label'）.show（）；
}，函数（）{
$（this.find（'.label'）.hide（）；
});
});

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

$（文档）.ready（函数（$）{
var-parPosition=[]；
$（'.par'）。每个（函数（）{
parPosition.push（$（this.offset（）.top））；
});
$（'a'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（$.attr（此'href'））.offset（）.top
}, 500);
返回false；
});
$（'.vNav ul li a'）。单击（函数（）{
$（'.vNav ul li a'）.removeClass（'active'）；
$（this.addClass（'active'）；
}); 
$（'.vNav a'）.hover（函数（）{
$（this.find（'.label'）.show（）；
}，函数（）{
$（this.find（'.label'）.hide（）；
});
$（文档）。滚动（函数（）{
var position=$（document）.scrollTop（），
指数
对于（VaR i＝0；I2不知道Bootstrap是如何提供的，但是如果它不为您这样做，您需要绑定到滚动事件并跟踪Top-Tochange的变化。看看这个：您考虑使用它吗？您可以使用它。如果您使用全屏页面，这将是这样做的。否则它可能不是最好的解决方案。取得进展。只需要最后的润色就可以在页面滚动时填充点。
<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();
       });

});

$(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');
    });   
});