带有引导程序的垂直点导航

我正在处理一个页面布局中的部分的点导航。目前，它将在单击时转到各节。我也能够使标签和点更改在悬停在悬停上显示。但是我正在努力让导航在滚动时反映出该部分。我已经在JSFIDDLE外部资源中添加了Bootstrap，并添加了推荐的车身代码，但显然仍然缺少某些东西。任何帮助将不胜感激。

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

通过大量研究，我能够使所有功能正常工作。最后的钥匙是使用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');
    });   
});

相关内容

最新更新

热门标签：