我修改了randomdude的答案，突出显示滚动到的最低标题，这将持续突出显示该链接，直到用户向下滚动到另一个链接为止。

const anchors = $('body').find('h1');

$(window).scroll(function(){
    var scrollTop = $(document).scrollTop();
    
    // highlight the last scrolled-to: set everything inactive first
    for (var i = 0; i < anchors.length; i++){
        $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').removeClass('active');
    }
    
    // then iterate backwards, on the first match highlight it and break
    for (var i = anchors.length-1; i >= 0; i--){
        if (scrollTop > $(anchors[i]).offset().top - 75) {
            $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').addClass('active');
            break;
        }
    }
});

叉式提琴链节：http://jsfiddle.net/tz6yxfk3/

我想你在找这个：

$(window).scroll(function(){
    var scrollTop = $(document).scrollTop();
    var anchors = $('body').find('h1');
    
    for (var i = 0; i < anchors.length; i++){
        if (scrollTop > $(anchors[i]).offset().top - 50 && scrollTop < $(anchors[i]).offset().top + $(anchors[i]).height() - 50) {
            $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').addClass('active');
        } else {
            $('nav ul li a[href="#' + $(anchors[i]).attr('id') + '"]').removeClass('active');
        }
    }
});

nav {
    position: fixed;
    right: 20px;
    top: 20px;
}

div {
    height: 2000px;
}

div > h1 {
    height: 200px;
}

.active {
    color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
    <ul>
        <li id="whatbutton"><a href="#whatissm">What We Are</a></li>
        <li id="whybutton"><a href="#whyusesm">Why Us</a></li>
        <li id="offerbutton"><a href="#whatdoessmoffer">What We Offer</a></li>
        <li id="contactbutton"><a href="#contactus">Contact Us</a></li>
    </ul>
</nav>
<div>
    <h1 id="whatissm" name="whatissm"><span>sometexthere</span></h1>
    <h1 id="whyusesm" name="whyusesm"><span>somtexthere</span></h1>
    <h1 id="whatdoessmoffer" name="whatdoessmoffer"><span>sometexthere</span></h1>
    <h1 id="contactus" name="contactus"><span>Contact Us</span></h1>  
</div>

片尾：Making a menu class active when scrolled past
小提琴链环：http://jsfiddle.net/yrz54fqm/1/

这和上面的答案是一样的，但是是用纯JavaScript写的，不需要jQuery。干得好，起重机，像冠军一样工作。

const anchors = document.querySelectorAll('h1');
const links = document.querySelectorAll('nav > ul > li > a');

window.addEventListener('scroll', (event) => {
  if (typeof(anchors) != 'undefined' && anchors != null && typeof(links) != 'undefined' && links != null) {
    let scrollTop = window.scrollY;
    
    // highlight the last scrolled-to: set everything inactive first
    links.forEach((link, index) => {
      link.classList.remove("active");
    });
    
    // then iterate backwards, on the first match highlight it and break
    for (var i = anchors.length-1; i >= 0; i--) {
      if (scrollTop > anchors[i].offsetTop - 75) {
        links[i].classList.add('active');
        break;
      }
    }
  }
});