README

此扩展包在Contao中创建一个单页导航元素。

原因

我们希望在一篇文章中有一个粘性的导航来更好地组织页面内容。

如何实现

创建一个新的开始元素（"One Page Navigation Start"）和一个结束包装元素（"One Page Navigation End"）。在包装元素之间添加你的内容元素。

给你的内容元素添加一个标题，并为元素指定一个特定的CSS ID。通过标题和CSS ID，扩展包会在内容元素上方创建一个新的带有锚链接的导航。

CSS样式示例

.ce_onepage {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin-top: 64px;
}

.ce_onepage .onepage_nav {
	max-width: 33.33%;
	flex-basis: 33.3333%;
	flex-grow: 0;	
}

.ce_onepage .onepage_content {
	max-width: 66.6666%;
	flex-basis: 66.6666%;
	flex-grow: 0;
}

.ce_onepage .onepage_nav ul{
    list-style: none;
    margin-left: 0;
    margin-top: 0;
    padding-left: 0;
    padding-top: 5px;
    position: -webkit-sticky;
    position: sticky;
    top: 100px;
}    

.ce_onepage .onepage_nav ul li{
    padding: 32px;
} 

.ce_onepage .onepage_nav ul li a {
    color: #000;
} 

.ce_onepage .onepage_nav ul li a.active {
    color: pink;
} 

.ce_onepage .onepage_content div {
	margin: 128px 0;
}

.ce_onepage .onepage_content div:first-child {
	margin-top: 0;
}

使用GSAP滚动触发器的附加JS功能，用于活动元素样式

• 在你的模板文件夹中创建一个新的文件 "js_onepage.html5"。
• 将文件添加到你的主题中或作为文章中的独立HTML元素。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

<script>
/* GSAP Scroll */
gsap.registerPlugin(ScrollTrigger);

//Navigationselemente
let st_nav = gsap.utils.toArray(".onepage_nav ul li a");
//Inhaltselemente
let panels = gsap.utils.toArray(".ce_text");


panels.forEach((panel, i) => {
  ScrollTrigger.create({
    trigger: panel,
    start: "top top",
	toggleClass: 'active',    
    onEnter: () => {
      gsap.set(st_nav, { className:"" });
      st_nav[i].classList.add('active');  
    },
    onEnterBack: () => {
      gsap.set(st_nav, { className:"" });
      st_nav[i].classList.add('active');  
    },
  });
});	

</script>