Изменение активной вкладки в зависимости от положения прокрутки

В настоящее время я пытаюсь создать сайт на одной странице. На данный момент у меня есть меню навигации, чтобы перейти к выбранной части веб-сайта при нажатии, а активная вкладка изменится и при щелчке. Но я пытаюсь выяснить, как сделать css изменяться на активную вкладку, когда следующая страница была прокручена до (и не нажата в меню).Изменение активной вкладки в зависимости от положения прокрутки

$(document).ready(function(){ 
    $("nav ul li").click(function(){ 
     var sectionClass = $(this).attr('class'); 
      if ($(this).hasClass('active')){ 
      } 
      else { 
       $("nav ul li.active").removeClass('active');  
       $(this).addClass('active');         
       sectionId = $(this).attr('id'); 
       var parts = sectionId.split("_"); 
       $('html, body').animate({          
        scrollTop: $("#" + parts[1]).offset().top 
       }, 'slow'); 
      } 
     }); 
    });

<body> 
    <nav class="nav-bar"> 
     <ul> 
      <li class="active" id="menu_index">Welcome</li> 
      <li id="menu_page1">Menu1</li> 
      <li id="menu_page2">Menu2</li> 
      <li id="menu_page3">Menu3</li> 
      <li id="menu_page4">Menu4</li> 
     </ul> 
    </nav> 
    <div id="index"></div> 
    <div id="page1"></div> 
    <div id="page2"></div> 
    <div id="page3"></div> 
    <div id="page4"></div> 
</body>

https://jsfiddle.net/nsefqo3w/

Добавлено jsfiddle, чтобы показать, как это только сейчас, я новичок, так что вы, вероятно, заметили несколько проблем!

источник

2015-07-03 lewis

Просто взгляните на эту скрипку;) http://jsfiddle.net/cse_tushar/Dxtyu/141/ –

Ole прав. Вы также должны использовать ширину li, потому что она выглядит awfull с ** vh ** –

Изменение меню будет настроить так:

<ul> 
    <li><a href="#page1">Page 1</a> 
    ... 
</ul>

Таким образом, он прокручивает к элементу DOM с id из page1, когда якорь щелкнул.

Затем вы можете использовать следующий код, чтобы пометить как активный на свитке:

function onScroll(event){ 
var scrollPos = $(document).scrollTop(); 
$('li>a').each(function() { 
    var currLink = $(this); 
    var refElement = $(currLink.attr("href")); 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
     $('li>a.active').removeClass("active"); 
     currLink.addClass("active"); 
    } 
    else{ 
     currLink.removeClass("active"); 
    } 
}); 
} 
$(document).ready(function() { 
    $(document).on("scroll", onScroll); 
});

EDIT:

Используйте свой собственный код JQuery, так что он переходит в активный на onclick, а также.

Источник: http://jsfiddle.net/cse_tushar/Dxtyu/141/

источник

2015-07-03 11:27:57

Изменение активной вкладки в зависимости от положения прокрутки

ответ

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