Squarespace JQuery：侧导航在特定高度上处于活动状态 class

Question

我的站点（桌面视图）上的侧边导航有问题：https://www.teamwinstudios.com

我希望侧导航上的活动 class 在用户向下滚动时一旦（或接近）相关页面进入视图时继承活动 class 。因此，例如，如果您向下滚动，您会注意到 'Featured Work' 页面图像网格中间附近的侧边导航从 'Home' 变为 'Featured Work'。我想要的是在 'Featured Works' 标题出现时发生这种变化。 activeclass需要早点换

这是侧边导航的相关 html：

    <nav class="Index-nav">
      <div class="Index-nav-inner">

          <a href="#home2" class="Index-nav-item active">
            <div class="Index-nav-indicator"></div>
            <div class="Index-nav-text"><span>Home</span></div>
          </a>

          <a href="#recent-work" class="Index-nav-item">
            <div class="Index-nav-indicator"></div>
            <div class="Index-nav-text"><span>Featured Work</span></div>
          </a>

          <a href="#team-win" class="Index-nav-item">
            <div class="Index-nav-indicator"></div>
            <div class="Index-nav-text"><span>Who We Are</span></div>
          </a>

          <a href="#services" class="Index-nav-item">
            <div class="Index-nav-indicator"></div>
            <div class="Index-nav-text"><span>What We Do</span></div>
          </a>

          <a href="#contact-1" class="Index-nav-item">
            <div class="Index-nav-indicator"></div>
            <div class="Index-nav-text"><span>Contact</span></div>
          </a>

      </div>
    </nav>

我已经使用下面的 jQuery 淡出活动 class:

<script>
    $(document).ready(function() {
    $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 400) {
        $('.Index-nav-item.active, .Index-nav-text').fadeOut();
    } else {
        $('.Index-nav-item.active, .Index-nav-text').fadeIn();
    }
});
});      
</script>

我现在无法定位 index-nav-text 中的下一个项目以淡入并继承 class 活动； w 这是我试过的：

<script>
    $(document).ready(function() {
    $(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 400) {
        $('.Index-nav-item.active, .Index-nav-text').fadeOut().removeClass('.active');
    } else if (y > 450) {
        $('.Index-nav-text:nth-of-type(2)').addClass('.active').fadeIn();
    } else {
        $('.Index-nav-item.active, .Index-nav-text').fadeIn();
    }
});
});      
</script>

我是 JS 的新手，所以我不确定我是否以最好的方式进行处理，我无法定位下一个导航项并在 class指定的高度。如果有更好的解决方案，我会洗耳恭听。感谢您的帮助！

Answer 1

这是一个很好的问题，令我感到惊讶的是我以前从未见过这样的问题。为了实现你所追求的，我觉得其实很复杂。

Squarespace's own code 正在处理索引导航，其方法无法使用我们自己的范围外代码注入进行修改。因此，必须首先将此功能的默认控制器短路以使其停止工作，然后创建一个行为理想的新控制器。

有趣的是，Squarespace 自己的控制器没有考虑用户滚动的方向。这很重要，因为如果用户向上滚动，您希望索引导航随着部分"back down" 另一个方向的到来而更新。这对于您想要的结果也很重要。

所以，使用Squarespace自己的控制器代码，修改为：

包括来自其他控制器的必要 imports 等
停止默认控制器工作
考虑滚动方向，向下滚动时检测底部的'active'部分，向上滚动时检测顶部
向 top/bottom 交叉点添加一个小缓冲区，以便部分在充分显示之前不会触发
包括其他一些杂项。进行更改以避免必须包含 imported 画廊相关的库

...然后将代码编译为 es2015 并将其缩小，以下内容似乎适用于您的网站，包含在 sitewide footer code injection:

<script>
/**
 * Custom Squarespace index navigation controller. Ref: 
 */
"use strict";window.Squarespace.onInitialize(Y,function(){!function(){var e=document.body;if(!e.classList.contains("Index--empty")){var t=document.getElementsByClassName("Index-nav-inner")[0];t.innerHTML=t.innerHTML;var n,o=window.pageYOffset||document.body.scrollTop,i={},r=[],a=function(){var e=window.pageYOffset,t=!1,o=!1,i=function(){o=!1,r.forEach(function(t){var n=t.fn;"scroll"===t.type&&n(e)})};return function(){!1===t&&(t=!0,r.forEach(function(e){var t=e.fn;"start"===e.type&&t()})),e=window.pageYOffset,o||window.requestAnimationFrame(i),o=!0,n&&clearTimeout(n),n=setTimeout(function(){t=!1,r.forEach(function(e){var t=e.fn;"end"===e.type&&t()})},100)}},c=function(){clearTimeout(n)};!function(){var e=a();window.addEventListener("scroll",e),window.addEventListener("mercury:unload",c)}();var s,u,f,l,d,w,v,m=window.innerHeight,g=Array.from(e.querySelectorAll(".Index-page, .Index-gallery")),p=g.reduce(function(e,t){return e[t.getAttribute("id")]=t,e},{}),y=e.querySelector(".Index-nav"),h=Array.from(y.querySelectorAll(".Index-nav-item")),b=h.reduce(function(e,t){return e[t.getAttribute("href")]=t,e},{}),L=h.filter(function(e){return e.classList.contains("active")})[0],E=L.getAttribute("href").substring(1),T=null,A=function(){return g.reduce(function(e,t){var n=function(e){var t=e.getAttribute("id");if(i[t])return i[t];var n=document.documentElement.scrollTop||document.body.scrollTop,o=e.getBoundingClientRect();return i[t]={top:Math.floor(o.top+n),right:o.right,bottom:Math.ceil(o.bottom+n),left:o.left,width:e.offsetWidth,height:e.offsetHeight+2},i[t]}(t),o=n.top,r=n.bottom,a=n.left,c=n.right;return e[t.getAttribute("id")]={top:o,bottom:r,left:a,right:c},e},{})},O=function(e){var t,n,i=e+m/2,r=(n=window.pageYOffset||document.documentElement.scrollTop,t=n>o?1:n<o?-1:0,o=n<=0?0:n,t),a=window.pageYOffset+window.innerHeight;r&&Object.keys(s).forEach(function(t){var n,o,c,f=s[t],l=f.top,d=f.bottom;if(E!==t&&(1===r?a>=l+300&&a<d:e<=d-500&&e>l)){var w="#"+t;L.classList.remove("active");var v=b[w];v.classList.add("active"),E=t,L=v}if(u)y.classList.remove("overlay");else if(T!==t&&i>=l&&i<d){var m=p[t];y.classList.toggle("overlay",(o=(n=m).classList.contains("Index-gallery"),c=n.classList.contains("Index-page--has-image"),o||c)),T=t}})};return f=(s=A())[Object.keys(s)[0]].left,l=window.Static.SQUARESPACE_CONTEXT.tweakJSON["tweak-index-nav-position"].toLowerCase(),d=parseFloat(window.getComputedStyle(y)[l]),u=f>d,O(window.pageYOffset),function(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,o=function(){clearTimeout(t),t=setTimeout(function(){e()},n)};window.addEventListener("resize",o),window.addEventListener("mercury:unload",function(){window.removeEventListener("resize",o)})}(function(){i={},m=window.innerHeight,s=A()}),w="scroll",v=O,r.push({type:w,fn:v}),{destroy:function(){var e,t;e="scroll",t=O,r.some(function(n,o){return!(n.type!==e||n.fn!==t||(r.splice(o,1),0))})}}}}()});
</script>

Squarespace JQuery：侧导航在特定高度上处于活动状态 class

Squarespace JQuery: side nav active class on specific height

javascript

jquery

html

squarespace