페이지가 선택되면 앵커 태그의 CSS 변경 - 단일 페이지 웹 사이트

Question

단일 페이지 웹 사이트를 5 페이지 (섹션)로 나누면 각 섹션이 화면을 채우고 사용자가 탐색 버튼을 클릭하면 부드럽게 아래로 스크롤됩니다 그 부분.

페이지가 선택되면 상단 탐색에서 앵커 요소에 밑줄을 그칠 수 없습니다. 사용자에게 어떤 페이지가 있는지 알려주고 스크롤 막대를 사용하여 해당 섹션을 탐색하는 경우에도 변경해야합니다.

페이지의 각 섹션에는 nav에서 링크 된 ID가 있습니다. 각 섹션이 자체 페이지 였지만 단일 페이지 사이트가 아닌 경우이 작업을 수행하는 방법을 알고 있습니다.

jquery 플러그인 또는 순수한 CSS 방법이 있습니까?

Answer 1

jQuery가 가장 좋은 방법입니다. 이것은 사용자가 페이지를 스크롤 할 때 nav 요소를 자동으로 변경합니다. 이것은 각 섹션의 높이가 같을 때 가장 잘 작동하지만 여러 섹션 높이를 사용하기 위해 약간 변경할 수 있습니다. 귀하의 사이트에 정확히 맞게 약간의 변경이 필요할 수 있습니다.

//activates every time user scrolls 
$(window).scroll(function() { 

    //gets the current scroll height 
    scroll = $(document).scrollTop() 

    //gets section height -- this is where the editing will have to be done if 
    //each section is a different height 
    H = $('.section_class_name').height() 

    //get the number of sections down 
    place = (scroll)/H; 
    place = Math.floor(place) - 1; 

    if($(document).scrollTop() >= H) { 
     //all other nav items have no background 
     $('#menu_ul li').css('background', ''); 

     //the corresponding nav element has this background 
     $('#menu_ul li').eq(place).css({'background':'#505080','border-radius':'9px'}); 
    } 
})