Javascript 单页站点粘性导航：更改内容元素的活动状态

我有一个单页站点，左侧有一个固定的（粘性的）侧栏导航菜单，还有一个包含内容的主div。主div分为5个部分，每个id中有许多元素

我正在尝试实现与导航菜单和主目录div中的元素相关的两个相互依赖/动态更改，但我正在努力使等式的所有部分都能正常工作。请看下面我的代码

选择菜单项时

a、 ）其状态应更改为“选定”；及

b） 页面应平滑滚动至主div中相应的节id；及

c） 主div中与所选菜单项对应的元素应将状态更改为“活动”

当用户上下滚动页面时：

a、 ）导航应根据视图中的当前部分（“选定”）进行自我更新；及

b、 ）当主内容div中的元素进入视口中心时，它们的状态应更改（“活动”）

（我意识到第1.c点和第2.b点或多或少是可以互换的，但不确定应该遵循哪种逻辑。）

从上面的列表中，到目前为止，第1点似乎工作正常，但是当我尝试根据滚动位置更新导航时，我的代码开始崩溃。我用有限的javascript技能遇到了一个障碍，非常感谢您的建议

$（函数（）{
$（'.nav_菜单_项目a'）。单击（函数（evt）{
var selectedTab=$（此值）；
var featureGroup=selectedTab.parents（“.sidebar\u nav\u container”）；
var allTabs=featureGroup.find（'.nav_菜单项a'）；
var allContent=featureGroup.find（'.feature_框'）；
//获取rel属性以了解需要激活的框
var rel=$（this.parent（）.attr（'rel'）；
//清除选项卡选择
allTabs.removeClass（'selected'）；
selectedTab.addClass（'selected'）；
//使所有框“处于活动状态”
$（'.feature_box'）。每个（函数（）{
$（this.removeClass（'active'）；
$（this.removeClass（'in-active'）；
});
//展示我们需要什么
$（'.feature_category_'+rel）.addClass（'active'）；
//查找相关内容
var idx=selectedTab.index（）；
var selectedContent=$（allContent）；
selectedContent.removeClass（'in-active'）；
$（'html，body'）。设置动画({
scrollTop:$（“#”+rel）.offset（）.top-90
}, 800);
});
});
$（文档）.ready（函数（）{
变量长度=$（'#边栏_包装器'）。高度（）-$（'.sidebar _导航_容器'）。高度（）+$（'#边栏_包装器'）。偏移量（）。顶部；
$（窗口）。滚动（函数（）{
var scroll=$（this.scrollTop（）；
变量高度=$（'.sidebar_nav_container'）.height（）+'px'；
如果（滚动<$（'#侧栏_包装器'）.offset（）.top）{
$（'.sidebar\u nav\u container'）.css({
'位置'：'绝对'，
“顶部”：“0”
});
}else if（滚动>长度）{
$（'.sidebar\u nav\u container'）.css({
'位置'：'绝对'，
“底部”：“0”，
“顶部”：“自动”
});
}否则{
$（'.sidebar\u nav\u container'）.css({
'位置'：'固定'，
“顶部”：“45px”，
“高度”：高度
});
}
});
});
$（文档）.ready（函数（）{
（功能highlightNav（）{
var prev；//跟踪上一个选定的链接
var isVisible=函数（el）{
el=$（el）；
如果（！el | | el.length==0）{
返回错误
};
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=el.offset（）.top；
var elemBottom=elemTop+el.height（）；
返回（（elemBottom>=docViewTop）&&（elemTop）
特征A-1
特征A-2
特征A-3
特征A-4
特征A-5
特征B-1
特征B-2
特征B-3
特征B-4
特征B-5
特征C-1
特征C-2
特征C-3
特征C-4
特征C-5
特征D-1
特征D-2
特征D-3
特征D-4
特征D-5
特征E-1
特征E-2
特征E-3
特征E-4
特征E-5

让我们检查一下您的部分问题。将更新完整答案

$（函数（）{
$（'.nav_菜单_项目a'）。单击（函数（evt）{
var selectedTab=$（此值）；
var featureGroup=selectedTab.parents（“.sidebar\u nav\u container”）；
var allTabs=featureGroup.find（'.nav_菜单项a'）；
var allContent=featureGroup.find（'.feature_框'）；
//获取rel属性以了解需要激活的框
var rel=$（this.parent（）.attr（'rel'）；
//清除选项卡选择
allTabs.removeClass（'selected'）；
selectedTab.addClass（'selected'）；
//使所有框“处于活动状态”
$（'.feature_box'）。每个（函数（）{
$（this.removeClass（'active'）；
$（this.removeClass（'in-active'）；
});
//展示我们需要什么
$（'.feature_category_'+rel）.addClass（'active'）；
//查找相关内容
var idx=selectedTab.index（）；
var selectedContent=$（allContent）；
selectedContent.removeClass（'in-active'）；
$（'html，body'）。设置动画({
滚动顶部：$（“#”+rel）.offset（）.top
}, 2000);
});
});
$（'a'）。单击（函数（）{
  <div class='pub_site_nav'>
    <div class="container">
         Page navigation menu
    </div>
  </div> <!-- /.container .pub_site_nav -->

  <div class="features_page">

      <div class="story_section_container">
           <div class="container">
                Hero section
           </div>
      </div><!-- /.container .pub_site_nav -->


      <div class="main_contents">
           <div class="container">


                <div id="sidebar_wrapper">
                     <div class="sidebar_nav_container">
                          <div class="nav_menu_item selected"><a href="#A">Features A</a></div>
                          <div class="nav_menu_item"><a href="#B">Features B</a></div>
                          <div class="nav_menu_item"><a href="#C">Features C</a></div>
                          <div class="nav_menu_item"><a href="#D">Features D</a></div>
                          <div class="nav_menu_item"><a href="#E">Features E</a></div>
                     </div><!-- /.sidebar_nav_container-->
                </div><!-- /.#sidebar_wrapper-->

                <div class="feature_boxes_container">

                     <span class="feature_category active" id="A">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-4</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature A-5</div>
                          </div>
                    </span>

                    <span class="feature_category" id="B">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-4</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature B-5</div>
                          </div>
                    </span>

                    <span class="feature_category" id="C">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-4</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-5</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-6</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature C-7</div>
                          </div>
                    </span>

                    <span class="feature_category" id="D">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature D-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature D-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature D-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature D-4</div>
                          </div>
                    </span>

                    <span class="feature_category" id="E">
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-1</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-2</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-3</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-4</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-5</div>
                          </div>
                          <div class="feature_box_wrapper">
                               <div class="feature_box">Feature E-6</div>
                          </div>
                    </span>


                </div><!-- /.feature_boxes_container-->

           </div><!-- /.container-->
      </div><!-- /.container .main_contents -->
      <div class="random_content" style="height:800px;background:#111;"></div>

      <div class="public_footer">
           <div class="container">
                Footer
           </div>
      </div> <!-- / .container .public_footer -->
  </div><!-- /.features_page -->

$(window).on("scroll", function(){
    $( ".feature_category" ).each(function() {
        var sectionID = $(this).attr("id");
        if ( $(window).scrollTop() >= $(this).offset().top - 220 ) {
           $('.nav_menu_item.selected').removeClass("selected");
           $('.nav_menu_item a[href=\'#'+sectionID+'\']').parent().addClass("selected");
           $('.feature_category').removeClass('active');
           $('#'+sectionID+'').addClass('active');
        }
    });
    /*Affix code*/
    var contentTop = $("#sidebar_wrapper").offset().top - 68;
    var footerTop = $(".random_content").offset().top - $('.sidebar_nav_container').outerHeight() - 65;
    if ( $(this).scrollTop() >= contentTop) {
        $( '.sidebar_nav_container' ).addClass("fixed");
    }else{
        $( '.sidebar_nav_container' ).removeClass("fixed");
    }
    if ( $(window).scrollTop() >= footerTop) {
       $( '.sidebar_nav_container' ).addClass("absolute_bottom");
    }else{
      $( '.sidebar_nav_container' ).removeClass("absolute_bottom");
    }
});
$( document ).on( "click", ".sidebar_nav_container a", function(e) {
  e.preventDefault();
  var sectionID = $(this).attr("href");
  $('html, body').animate({
        scrollTop: $(sectionID).offset().top - 200
    }, 800);
});

body,html{
  padding: 0;
  margin: 0;
  max-width: 100%;
  background: #fff;
}
/*easier to have your container with margin and not padding that way your element is actually in that position and not padding to that position*/
.container {
  margin:0 80px;
  position:relative;
}
.pub_site_nav {
  position:fixed;
  width:100%;
  z-index:10;
  top:0;
  left: 0;
  height:68px;
  line-height:64px;
  background:yellow;
}
.features_page{
  margin-top:65px;
}
.features_page .story_section_container {
  background-color:#888;
  padding-bottom:100px;
  padding-top:72px;
  text-align:left
}
/*Better to have a fixed width for your sidebar that way everything will work properly when your sidebar goes fixed because you need to account for your .container margin once it is in fixed position you can do it with a percentage if you use css calc but it has less browser compatibility also your main_contents should not have a max-width because when the sidebar goes fixed it will be in the wrong position if the screen goes above the max-width of the container*/
#sidebar_wrapper {
  position: absolute;
  left: 0;
  top: 0;
  bottom:0;
  width: 200px;
  background:orange;
}
.sidebar_nav_container {
  padding: 24px 0;
  width: 200px;
}
.sidebar_nav_container.fixed{
  position:fixed;
  top:68px;
  left:80px;
}
.sidebar_nav_container.absolute_bottom{
  position:absolute;
  top:auto;
  bottom: 0;
  left:0;
}
.sidebar_nav_item{
  width:100%;
  padding:0;
  margin:0;
}
.sidebar_nav_container .nav_menu_item a {
  text-align: left;
  padding:10px 10px 10px 24px;
  border-left: 1px solid #efefef;
  text-transform:uppercase;
  text-decoration: none;
  font-size:12px;
  font-weight:500;
  position:relative;
  display:block;
  /*so nav item doesn't jump on hover*/
  border:4px solid transparent;
}

.sidebar_nav_container .nav_menu_item a:hover {
  border-left:4px solid #d6ecfd;
}

.sidebar_nav_container .nav_menu_item.selected a {
  border-left:4px solid #1193f6;
}

.feature_boxes_container{
  background: #f2f2f2;
  padding:45px 0 80px 0;
  margin-left:200px;
  /*The Following 2 lines removes the whitespace from feature box wrapper so they will align with a width of 25%*/
  font-size:0;
  zoom: 1;
}
.feature_box_wrapper{
  width:25%;
  margin:0;
  padding:0;
  display:inline-block;
}
.feature_boxes_container .feature_box {
  text-align: center;
  background:#fff;
  margin:10px;
  padding: 24px;
  height:100px;
  /*so everything aligns properly and doesn't jump when activated*/
  border:2px solid transparent;
  font-size:12px;
}
.feature_boxes_container .feature_category.active .feature_box {
  border: 1px solid red
}
.features_page .public_footer {
  padding: 60px 0;
  background: green;
}
@media screen and (max-width: 1049px){
  .feature_box_wrapper{width: 50%; }
}
@media screen and (max-width: 767px){
  .container{margin:0 10px; }
  #sidebar_wrapper{width: 125px; }
  .sidebar_nav_container{width:125px; }
  .sidebar_nav_container.fixed{left:10px; }
  .sidebar_nav_container.absolute_bottom{left:0; }
  .feature_boxes_container{margin-left:125px; }
  .feature_box_wrapper{width: 100%; }
}