themes/apachecon/layouts/venue_travel/single.html (88 lines of code) (raw):
<!DOCTYPE HTML>
<html>
{{ partial "header.html" . }}
<body>
<!-- Header Wrapper -->
<div class="wrapper style1">
<!-- Header -->
<div id="header" class="sub-banner position-relative d-flex flex-column">
{{ partial "nav.html" . }}
</div>
<!-- Main -->
<div id="main" class="wrapper page">
<h2 class="text-center mb-5">{{ .Title }}</h2>
<!-- Content -->
<div id="content" class="container">
<div class="row">
<div class="col-12 col-lg-3">
<ul class="side-left-nav nav nav-pills flex-column position-sticky" style="top: 80px">
{{ $url := "" }}
{{ if eq $.Site.Language.Lang "en" }}
{{ $url = "/venue_travel/venue.html" }}
{{ else }}
{{ $url = "/zh/venue_travel/venue.html" }}
{{ end }}
{{ $array := slice "venue" "about-hangzhou" "getting-there" }}
{{ range $index, $element := $array }}
<li class="nav-item">
{{ if eq $.Site.Language.Lang "en" }}
<a href="{{$url}}#{{$element}}" class="nav-link">
{{ i18n $element }}
</a>
{{else}}
<a href="{{$url}}#{{i18n $element}}" class="nav-link">
{{ i18n $element }}
</a>
{{end}}
</li>
{{ end }}
<li class="nav-item">
<a href="{{ if eq $.Site.Language.Lang "zh" }}/zh/guide/visa_letter_request.html{{else}}/guide/visa_letter_request.html{{end}}" class="nav-link">{{ i18n "visa_letter_request" }}</a>
</li>
</ul>
</div>
<div class="col-12 col-lg-9">
<div class="card border-0">
<div class="card-body p-4">
<article>{{.Content}}</article>
</div>
</div>
</div>
</div>
</div>
</div>
{{ partial "footer.html" . }}
</body>
<script>
function setActiveAnchor() {
var h3Tags = document.querySelectorAll('article h3');
var h3Ids = [];
h3Tags.forEach(h3 => {
h3Ids.push(h3.id);
});
var idsClientRect = h3Ids.map((id) => {
return document?.getElementById(id)?.getBoundingClientRect();
});
const idsTop = idsClientRect.map((item, index) => {
return {
index,
id: h3Ids[index],
top: item.top,
contentHeight: idsClientRect[index + 1]?.top - item.top,
};
});
const topId = idsTop.reduce((prev, curr) => {
return Math.abs(curr.top) < Math.abs(prev.top)
? curr
: prev;
});
const links = document.querySelectorAll(".side-left-nav a");
links.forEach((link) => {
const id = link.getAttribute("href").split('#')[1];
if (id === topId.id) {
link.classList.add("active");
} else {
link.classList.remove("active");
}
});
}
window.addEventListener('scroll', setActiveAnchor);
window.onload = setActiveAnchor;
</script>
</html>