Вертикальная точка навигации с Bootstrap

Я работаю над точечной навигацией для разделов в макете одной страницы. В настоящее время он переходит к разделам по клику. Мне также удалось получить ярлыки и изменение точек, чтобы они отображались при наведении. Но я изо всех сил стараюсь, чтобы навигация отражала раздел при прокрутке. Я добавил бутстрап для 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(); 
     }); 

});

источник

2015-05-08 Carin Camen

я не уверен, что самозагрузки предоставляет из коробки, но если он не сделает это за вас, что вам нужно привязать к событию прокрутки и отслеживать изменения в верхнюю часть. взгляните на это: https://api.jquery.com/scroll/ – dewd

Считаете ли вы использование [fullPage.js] (http://alvarotrigo.com/fullPage/) для этого? Вы можете использовать [вариант вертикальной навигации] (http://alvarotrigo.com/fullPage/examples/navigationV.html#secondPage) в сочетании с [autoScrolling: false] (http://alvarotrigo.com/fullPage/examples/ normalScroll.html). Это будет сделано, если вы работаете с полноэкранными страницами. В противном случае это может быть не лучшее решение. – Alvaro

Достижение прогресса. Просто нужны последние штрихи, чтобы заполнить точки в виде прокрутки страницы. http://jsfiddle.net/carincamen/ram0Ly92/ –

С большим количеством исследований, я был в состоянии получить все функции работают правильно. Последний ключ использовал 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'); 
    }); 
});

источник

2015-06-12 22:14:55

Вертикальная точка навигации с Bootstrap

ответ

Смежные вопросы