Scrollspy-与平滑滚动结合使用的突出显示问题

问题描述

视觉预览

例如，当点击团队时，它将首先突出显示作品集 （因为它将滚动到该部分之外）。我希望它在平滑滚动时立即将团队突出显示（删除导航中的所有其他突出显示）。因此，当某人单击导航链接上的导航菜单时，请删除所有其他活动类别。希望有人能帮助我。如果您还有其他改进脚本的技巧，将不胜感激。

（旁问：将鼠标悬停在导航中的另一个链接上时，请删除活动类。当鼠标悬停在另一个链接上时，请重新打开活动类。）

SCROLLSPY（jQuery）

function scrollSpy() {
      var sections = ['about_us','services','portfolio','team','contact'];
      var current;
      var headerHeight = $('header').outerHeight();

      for (var i = 0; i < sections.length; i++) {
        if ( $('#'+sections[i]).offset().top - headerHeight - 1 <= $(window).scrollTop() ) {
          current = sections[i];
        }
      }

      $("nav#nav-container ul li a[href='#"+current+"']").addClass('active');
      $("nav#nav-container ul li a").not("a[href='#"+current+"']").removeClass('active');      
    }

    //scrollSpy call
    $(document).ready( function() {
      scrollSpy();
    });

    $(window).scroll( function() {
      scrollSpy();
    });

SMOOTHSCROLL

let anchorLinks = document.querySelectorAll('a[href^="#"]')
var headerHeight = $('header').outerHeight();
for (let item of anchorLinks) {
  item.addEventListener('click',(e) => {
    let hashVal = item.getAttribute('href')
    let topOfElement = document.querySelector(hashVal).offsetTop - headerHeight

    window.scroll({ top: topOfElement,behavior: "smooth" })
    history.pushState(null,null,hashVal)
    e.preventDefault()
  })
}

感谢您阅读：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

highlight javascript