Javascript Squarespace JQuery：特定高度上的侧导航活动类

我的站点（桌面视图）的侧导航有问题：

我希望侧导航上的活动类在用户向下滚动时，一旦（或更接近）相关页面进入视图，就继承活动类。例如，如果你向下滚动，你会注意到侧导航在“特色作品”页面的图像网格中间从“主页”变为“特色作品”。我想要的是，随着“特色作品”标题的出现，这种变化也会发生。活动类需要提前更改

这是侧导航的相关html：

我在下面使用jQuery淡出了活动类：

<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>    

---

我对JS非常陌生，所以我不确定是否以最佳方式进行操作，我无法针对下一个导航项目，并在指定高度为其提供必要的类。如果有更好的解决办法，我洗耳恭听。谢谢你的帮助

这是一个很棒的问题，我很惊讶我以前没见过有人问过这个问题。为了达到你所追求的目标，我认为这实际上是非常复杂的

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

有趣的是，Squarespace自己的控制器没有考虑用户滚动的方向。这一点很重要，因为如果用户正在向上滚动，您希望索引导航在节从另一个方向“向下滚动”时更新。这对于你想要的结果也是至关重要的

因此，使用Squarespace自己的控制器代码，将其修改为：

• 包括从其他控制器导入必要的

  ，以及

• 停止默认控制器的工作
• 考虑滚动方向，向下滚动时从底部检测“活动”部分，向上滚动时从顶部检测
• 向顶部/底部交点添加一个小的缓冲区，以便在充分看到截面之前不会触发它们
• 包括一些其他杂项。更改以避免包含

  import

  ed库相关库

…然后将代码编译到es2015并缩小它，以下内容似乎对我在您的网站上有用，包括：

/**
*自定义Squarespace索引导航控制器。裁判：https://stackoverflow.com/questions/58046642/
*/
“严格使用”；window.Squarespace.onInitialize（Y，function（）{！function（）{var e=document.body；if（！e.classList.contains（“Index--empty”）{var t=document.getElementsByClassName（“Index nav internal”）[0]；t.innerHTML=t.innerHTML；var n，o=window.pageYOffset | | document.body.scrollTop，i={}，r=[]，a=function（）{var e=window.pageYOffset，t=！t=！o=！1，i=function（）{（t） （1）1==t&（t=！0 0，r.forEach（函数（e）{var t=t=t.t.t.fn=t.t.fn{var n=t=t.t.fn=t.t.fn；卷轴；卷轴；卷轴；卷轴；卷轴；卷轴；卷轴；卷轴；返回返回函数；返回返回函数；返回函数；返回返回函数；返回函数；返回函数；返回返回函数；返回函数；返回函数；返回；返回；返回函数；返回函数；返回函数；返回层；返回层：t=t=t=t.t.t=t.t.t.t.t.t.t.类型以及以及包括包括包括包括包括包括包括包括t.t.t.t.t.t类型和t.t.t.t&t.t.t&t&t&t&t.t&t.t.t=t=t=t=t.t.t.t.t.t){var e=a（）；window.addEventListener（“滚动”，e），window.addEventListener（“水星：卸载”，c）}（）；var s，u，f，l，d，w，v，m=window.innerHeight，g=Array.from（e.querySelectorAll（.Index页，.Index库”）），p=g.reduce（函数（e，t）{返回e[t.getAttribute（“id”）=t，e}，e}，{}，y=e.querySelector（.Index导航），h=Array.from（y.querySelectorAll（.Index导航项），b=h.reduce（函数（e，t）{return e[t.getAttribute（“href”）]=t，e}，{}），L=h.filter（函数（e）{return e.classList.contains（“active”）}[0]，e=L.getAttribute（“href”）.substring（1），t=null，A=function（）{return g.reduce（函数（e，t）{var n=function（e）{var t=e）{var t=e.getAttribute（“id”）；if（i[t]）返回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+2}，i[t]}（t），o=n.top，r=n.bottom，a=n.left，a=n.left，c=n.right；return e[t.getAttribute（id]{，bottom，bottom:top，bottom:a，loft，left，left，r:c}{，O=function（e）{var t，n，i=e+m/2，r=（n=window.pageYOffset | | document.documentElement.scrollTop，t=n>O？1:n1&&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）}{，m=window.innerHeight，s=A（）}），w=“scroll”，v=O，r.push（{type:w，fn:v}），{destroy:function（）{var e，t；t=“scroll”，t=O，r.some（function（n，O）{return！（n.type！==e | | n.fn！==t | | |（r.splice（O，1），0））}；

嘿，我用的是罗孚。非常感谢，这是一个令人惊讶的答案。我没想到它会变得这么复杂；甚至没有考虑到向后滚动。我会仔细研究一下这个问题一段时间！

<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>    

<script>
/**
 * Custom Squarespace index navigation controller. Ref: https://stackoverflow.com/questions/58046642/
 */
"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>