滚动到该部分时如何使我的导航栏链接处于活动状态？

Question

在我的网站上，我希望在滚动到该部分时激活活动导航链接样式。当您单击链接并滚动到该部分时，它会起作用，但是，一旦用户滚动离开，活动链接就不会改变之前单击的内容。如何在用户滚动时更改活动样式？

HTML 代码

      <nav id="topNav" class="navbar navbar-expand-lg navbar-light ">
        <a class="navbar-brand" href="#landing"><img id="brandLogo" src="project-images/portfolio logo2.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#about">About <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#skills">skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#projects">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#contact">Contact</a>
            </li>
           
          </ul>
        </div>
      </nav>

css

.navbar {
        position: fixed;
        width: 100%;
        height: 90px;
        z-index: 1000;
        margin: 0;
        padding: 1.5rem 8rem !important;
        /* background: #262626; */
        background: transparent;
        transition: 0.5s ease-out;
        /* background: transparent !important; */
    }

    .navbar .navbar-nav a{
        background: -webkit-linear-gradient(#e6e6ff, #6666ff);
       -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 20px !important;
        margin: 10px;
        padding: 10px 30px;
        font-family: 'Ubuntu', sans-serif;
        transition: 0.7s;
    }

    .navbar .navbar-nav a:hover {
        background: -webkit-linear-gradient(#e6e6ff, #fff);
        -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
        /* color: #1b2735 !important;
        border-radius: 30px; */
    }

    .nav-item{
        background: transparent !important;
    }
   
    
    #topNav.scroll-menu {
        background: #090a0f;
        border-bottom: 0.5px solid #b3b3ff;
        height: 90px;
        box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
    }


    #topNav.scroll-menu a {
      color: #0f1f3d !important;
      transition: 0.6s ease-in-out;
    }
    
 #topNav.scroll-menu ul li.active a{

    border: 1px solid #6666ff;
    border-bottom: #6666ff;
    border-radius: 30px;
    
        
    } 
    
    #topNav.scroll-menu a:hover{
        color: #fff;
            
    }

JS代码

window.addEventListener("scroll", function(){
    let topNav = document.getElementById("topNav");

    if(window.pageYOffset >  750) {
        topNav.classList.add("scroll-menu");
    } else {
        topNav.classList.remove("scroll-menu")
    }

});


$(window).scroll(function(){
    let position = $(this).scrollTop();

    $('.section').each(function(){
        let target = $(this).offset().top;
        let id = $(this).attr('id');

        if(position >= target) {
            $('#topNav > ul > li > a').removeClass('active');
                $('#topNav > ul > li > a [href=#' + id + ']').addClass('active') 
        } 
    })



});

Answer 1

我不知道我是否做得对，因为我是这个领域的新手。但我希望这可以帮助你，因为当我遇到同样的需求时，我提到了这段代码。 “https://codepen.io/yohored/pen/aEnLd” 您可以查看此链接。
或者这也可以帮助你http://jsfiddle.net/cse_tushar/Dxtyu/141/

<div class="m1 menu">
    <div id="menu-center">
        <ul>
            <li><a class="active" href="#home">Home</a>

            </li>
            <li><a href="#portfolio">Portfolio</a>

            </li>
            <li><a href="#about">About</a>

            </li>
            <li><a href="#contact">Contact</a>

            </li>
        </ul>
    </div>
</div>
<div id="home"></div>
<div id="portfolio"></div>
<div id="about"></div>
<div id="contact"></div>

.menu {
width:

 100%;
    height: 75px;
    background-color: rgba(0, 0, 0, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.light-menu {
    width: 100%;
    height: 75px;
    background-color: rgba(255, 255, 255, 1);
    position: fixed;
    background-color:rgba(4, 180, 49, 0.6);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#menu-center {
    width: 980px;
    height: 75px;
    margin: 0 auto;
}
#menu-center ul {
    margin: 15px 0 0 0;
}
#menu-center ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}

$(document).ready(function () {
    $(document).on("scroll", onScroll);
    
    //smoothscroll
    $('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        $(document).off("scroll");
        
        $('a').each(function () {
            $(this).removeClass('active');
        })
        $(this).addClass('active');
      
        var target = this.hash,
            menu = target;
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top+2
        }, 500, 'swing', function () {
            window.location.hash = target;
            $(document).on("scroll", onScroll);
        });
    });
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#menu-center a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#menu-center ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{**strong text**
            currLink.removeClass("active");
        }
    });
}