Javascript 有没有更好的方法达到同样的效果？单页网站

我试图创建一个网站，只有一个页面，但其中有不同的部分，你可以导航使用菜单，它会滚动到选定的部分你

以下是我使用以下技术创建的网站的实时预览：

请查看我正在使用的HTML和JavaScript，忽略CSS，因为它不起任何作用：

我的问题是：我想让按钮获得类。当他们的部分显示时，我知道我设法让它工作，正如你在实时预览中注意到的那样。但是，正如您在小提琴中看到的，我使用的JS有点复杂，我认为它确实令人困惑，尤其是在处理一个包含许多部分的大型项目时

有没有更简单的方法来达到同样的效果？我不喜欢使用插件。任何帮助或建议都将不胜感激

以下是JS：

$(document).ready(function() {

    //Prevent clicking on .active links
    'use strict'; $('.active').click(function(a) {
        a.preventDefault();
    });

    //Menu Scrolling To Sections//
    $(document).ready(function () {
    $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

        if (target.length) { 
            var topPadding = 50; 
        if($(window).width() > 1030) 
            topPadding = 80; 
        $('html,body').animate({ 
            scrollTop: target.offset().top - topPadding }, 700);
        return false;
        }}});
    });


    $(window).scroll(function(){ 
    var scrollHeight = $(window).scrollTop() + 200; 

    var index = $('#Index').offset().top; 
    var sectionA = $('#SectionA').offset().top; 
    var sectionB = $('#SectionB').offset().top; 
    var sectionC = $('#SectionC').offset().top; 

        $('#mainMenu li a').removeClass('active'); 

        if(scrollHeight >= index && scrollHeight < sectionA) 
        $('#index').addClass('active'); 

        if(scrollHeight >= sectionA && scrollHeight < sectionB) 
        $('#sectionA').addClass('active'); 

        if(scrollHeight >= sectionB && scrollHeight < contact) 
        $('#sectionB').addClass('active'); 

        if(scrollHeight >= sectionC) 
        $('#sectionC').addClass('active'); 
    });


}); 

$（文档）.ready（函数（）{
//阻止点击活动链接
“使用严格的”；$（“.active”）。单击（函数（a）{
a、 预防默认值（）；
});
//菜单滚动到部分//
$（文档）.ready（函数（）{
$（'a[href*=#]：非（[href=#]）。单击（函数（）{
if（location.pathname.replace（/^\/，“”）=此.pathname.replace（/^\/，“”）
||location.hostname==this.hostname）{
var target=$（this.hash）；
target=target.length？target:$（'[name='+this.hash.slice（1）+']'）；
if（target.length）{
var=50；
如果（$（窗口）.width（）>1030）
加总=80；
$（'html，body'）。设置动画（{
scrollTop:target.offset（）.top-topPadding}，700）；
返回false；
}}});
});
$（窗口）。滚动（函数（）{
var scrollHeight=$（窗口）.scrollTop（）+200；
var index=$（'#index'）.offset（）.top；
var sectionA=$（'#sectionA'）.offset（）.top；
var sectionB=$（'#sectionB'）.offset（）.top；
var sectionC=$（'#sectionC'）.offset（）.top；
$（“#主菜单li a”）.removeClass（'active'）；
如果（滚动高度>=索引和滚动高度=截面A&&scrollHeight<截面B）
$（'#sectionA'）。addClass（'活动'）；
如果（滚动高度>=节B&&scrollHeight<触点）
$（#sectionB'）。addClass（'active'）；
如果（滚动高度>=截面C）
$（#sectionC'）。addClass（'active'）；
});
}); 

以及HTML：

        <header id="headerWrapper">
            <div id="headerContent">
                <nav>
                    <ul id="mainMenu"><!--Main Menu-->
                        <li><a class="active" href="#Index" id="index">Welcome</a></li>
                        <li><a href="#SectionA" id="sectionA">SectionA</a></li>
                        <li><a href="#SectionB" id="sectionB">SectionB</a></li>
                        <li><a href="#SectionC" id="sectionC">Contact</a></li>
                    </ul>
                </nav>

            </div>
        </header>

        <div id="page"><!--Main Container-->

            <div id="Index" class="wrapper">
                <div class="content">

                </div>
            </div>  

            <div id="SectionA" class="wrapper">
                <div class="content">

                </div>
            </div> 

            <div id="SectionB" class="wrapper">
                <div class="content">

                </div>
            </div> 

            <div id="SectionC" class="wrapper">
                <div class="content">

                </div>
            </div>        
</div>

我为您找到了这个函数：

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

---

您是否尝试过使用JQuery向按钮添加类经过测试且有效

首先，向每个按钮添加另一个类和数据：

<li><a class="btn active" data-btn="index" href="#Index" id="index">Welcome</a></li>
<li><a class="btn" data-btn="sectionA" href="#SectionA" id="sectionA">SectionA</a></li>
<li><a class="btn" data-btn="sectionB" href="#SectionB" id="sectionB">SectionB</a></li>
<li><a class="btn" data-btn="sectionC" href="#SectionC" id="sectionC">Contact</a></li>

可能是这样的：

$(document).ready(function() {

  $('#mainMenu a').click(function() {
    $('#mainMenu a').removeClass('active');
       $(this).addClass('active');
   });

   if(scrollHeight >= index && scrollHeight < sectionA) 
    {$('#index').trigger('click');} //etc

  });

$（文档）.ready（函数（）{
$（“#主菜单a”）。单击（函数（）{
$（“#主菜单a”）.removeClass（'active'）；
$（this.addClass（'active'）；
});
如果（滚动高度>=索引和滚动高度

如果您改变了对插件的看法，您可能希望使用选项

autoScrolling:false

。抱歉，这里是：看看这个示例，与您正在寻找的相同：这是有效的，然而，导航中的按钮也应该获得类。不仅在单击时激活，而且在您实际滚动并显示其部分时激活。很抱歉，我遗漏了一个括号

var btn=$（this）.data（“btn”）还记得添加行
请更新小提琴好吗？它不起作用：/I我知道我做错了什么，让我们看看如果已经回答了，请将其中一个答案作为您选择的答案。这只会在单击按钮时将类添加到活动状态。n仅：/n使用滚动高度触发单击。
$(document).ready(function() {

//Prevent clicking on .active links
'use strict'; $('.active').click(function(a) {
    a.preventDefault();
});

//Menu Scrolling To Sections//
$(document).ready(function () {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
            || location.hostname == this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

            if (target.length) { 
                var topPadding = 50; 
                if($(window).width() > 1030) 
                topPadding = 80; 
                $('html,body').animate({ 
                    scrollTop: target.offset().top - topPadding }, 700);
                    return false;
                }
            }
        });
    });


$(window).scroll(function(){ 
    var scrollHeight = $(window).scrollTop() + 200; 
    var index = $('#Index').offset().top; 
    var sectionA = $('#SectionA').offset().top; 
    var sectionB = $('#SectionB').offset().top; 
    var sectionC = $('#SectionC').offset().top; 

    });
}); 


$(function(){
    $('.btn').on('click', function(){
        var btn = $(this).data("btn");
        $('#index').removeClass("active");
        $('#sectionA').removeClass("active");
        $('#sectionB').removeClass("active");
        $('#sectionC').removeClass("active");
        $('#'+btn).addClass ("active");
    });
});

$(document).ready(function() {

  $('#mainMenu a').click(function() {
    $('#mainMenu a').removeClass('active');
       $(this).addClass('active');
   });

   if(scrollHeight >= index && scrollHeight < sectionA) 
    {$('#index').trigger('click');} //etc

  });