Question

我正在为单页面布局中的部分进行点导航。它目前将转到点击的部分。我也能够在悬停时显示标签和点更改。但是我在努力让导航在滚动时反映出该部分。我已经为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();
       });

});

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

带引导程序的垂直点导航

1 个答案: