在粘性导航栏上更改活动状态？

Question

我有一个网站，当用户滚动让他们知道他们所在的当前页面时，我希望在粘性导航栏上有活动状态链接。

我尝试了大量的javascript和jQuery代码，没有任何反应。

任何人都可以查看我的代码并告诉我我错过了什么吗？ TIA

PS尝试发布代码，但网页不允许我。

编辑＃2这个网站不允许我发布我的代码，它一直告诉我格式不好。

编辑＃3最后代码结束了谢谢！

＆＃13;

＆＃13;

$(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();
        $('main-nav a').each(function () {
            var currLink = $(this);
            var refElement = $(currLink.attr("href"));
            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
                $('sticky main-nav ul li a').removeClass("active");
                currLink.addClass("active");
            }
            else{
                currLink.removeClass("active");
            }
        });
    }

＆＃13;

.sticky {
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 2px #dbdbdb;
    opacity: .95;
    z-index: 9999;
    transition: 1s;
    
}

.sticky .main-nav { margin-top: 35px;}

.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    color: black;
    text-decoration: none;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
    text-transform: uppercase;
    padding: 1px;
    
}

.sticky .main-nav li a:hover,
.sticky .main-nav li a:active {
    border-bottom: 1.5px solid black; 
    color: rgb(153, 153, 153);
}


.sticky .main-nav li a:link,
.sticky .main-nav li a:visited {
    padding: 5px 0;
    color: #555;
    
}


.sticky .dog-dark {
    display: block;
    transition: 2s;
}

.sticky .dog-white {
    display: none;   
}


.sticky .mobile-nav-icon i {
    font-size: 225%;
    color: rgb(0, 0, 0);
    margin-top: 30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="home">
            <nav>
                <div class="row">
                 <a href="#home"><img src="img/dog.png" alt="Logo white" class="dog-white"></a> 
                 <a href="#home"><img src="img/dog_dark.png" alt="Logo dark" class="dog-dark"></a>
                    <ul class="main-nav js--main-nav">
                        <li><a class="active" href="#home">Home</a></li>
                        <li><a href="#about">About</a></li>
                        <!-- <li><a  href="#portfolio">Portfolio</a></li> -->
                        <li><a href="#services">Services</a></li>
                        <li><a href="#contact">Contact</a></li> 
                    </ul>
                    <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
                </div>    
            </nav>

＆＃13;

＆＃13;

＆＃13;