Это отличный вопрос, который я удивляюсь, я его раньше не видел.Чтобы достичь того, чего вы хотите, я думаю, что это на самом деле очень сложно.
Собственный код Squarespace обрабатывает навигацию по индексу, и его методы недоступны для изменения с помощьюнаше собственное внедрение кода вне области видимости.Поэтому необходимо сначала замкнуть контроллер по умолчанию для этой функции, чтобы остановить его работу, а затем создать новый контроллер, который ведет себя желательным образом.
Интересно, что собственный контроллер Squarespace не учитывает, в каком направлениипользователь прокручиваетЭто важно, потому что, если пользователь прокручивает обратно вверх, вы хотите, чтобы навигация по индексу обновлялась, когда разделы возвращаются в обратном направлении.Это также важно для желаемого результата.
Итак, используя собственный код контроллера Squarespace, изменив его на:
- , включая необходимые
import s от других контроллеров и такие - остановка работы контроллера по умолчанию
- с учетом направления прокрутки, определение «активного» раздела снизу при прокрутке вниз и сверху при прокрутке вверх
- добавить небольшой буфердо верхних / нижних точек пересечения, так что секции не срабатывают, пока они не будут видны должным образом
- включают некоторые другие разности.Чтобы избежать необходимости включать
import ed библиотеки, связанные с галереей
... и затем компилировать код в es2015 и минимизировать его, мне кажется, что на вашем сайте работает следующее, включенное через внедрение кода нижнего колонтитула :
<script>
/**
* Custom Squarespace index navigation controller. Ref: /12771142/squarespace-jquery-aktivnyi-klass-bokovoi-navigatsii-na-opredelennoi-vysote
*/
"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>