94 lines
2.2 KiB
JavaScript
94 lines
2.2 KiB
JavaScript
$("#mainNav ul li a[href^='#']").on('click', function(e) {
|
|
|
|
// prevent default anchor click behavior
|
|
e.preventDefault();
|
|
|
|
// store hash
|
|
var hash = this.hash;
|
|
|
|
// animate
|
|
$('html, body').animate({
|
|
scrollTop: $(hash).offset().top
|
|
}, 1000, function(){
|
|
|
|
// when done, add hash to url
|
|
// (default click behaviour)
|
|
window.location.hash = hash;
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
// on scroll
|
|
let mainNavLinks = document.querySelectorAll("nav ul li a");
|
|
let mainSections = document.querySelectorAll(".highlight-on-scroll");
|
|
|
|
|
|
let lastId;
|
|
let cur = [];
|
|
|
|
// This should probably be throttled.
|
|
// Especially because it triggers during smooth scrolling.
|
|
// https://lodash.com/docs/4.17.10#throttle
|
|
// You could do like...
|
|
// window.addEventListener("scroll", () => {
|
|
// _.throttle(doThatStuff, 100);
|
|
// });
|
|
// Only not doing it here to keep this Pen dependency-free.
|
|
|
|
window.addEventListener("scroll", event => {
|
|
|
|
let fromTop = window.scrollY;
|
|
|
|
mainNavLinks.forEach(link => {
|
|
let section = document.querySelector(link.hash);
|
|
|
|
|
|
if (
|
|
section.offsetTop <= fromTop &&
|
|
section.offsetTop + section.offsetHeight > fromTop
|
|
) {
|
|
link.classList.add("active");
|
|
} else {
|
|
link.classList.remove("active");
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// bottom to top
|
|
$(window).on('scroll', function() {
|
|
if ($(this).scrollTop() > 600) {
|
|
$('.tap-top').fadeIn();
|
|
} else {
|
|
$('.tap-top').fadeOut();
|
|
}
|
|
});
|
|
|
|
$('.tap-top').click( function() {
|
|
$("html, body").animate({
|
|
scrollTop: 0
|
|
}, 600);
|
|
return false;
|
|
});
|
|
|
|
// navbar
|
|
$(document).ready(function(){
|
|
$(".custom_nav , .js-scroll ,navabr_btn-set").click(function(){
|
|
$(".hidenav").toggle();
|
|
});
|
|
});
|
|
|
|
// navbar active class
|
|
var header = document.getElementById("scroll-spy");
|
|
var btns = header.getElementsByClassName("js-scroll");
|
|
for (var i = 0; i < btns.length; i++) {
|
|
btns[i].addEventListener("click", function() {
|
|
var current = document.getElementsByClassName("active");
|
|
current[0].className = current[0].className.replace(" active", "");
|
|
this.className += " active";
|
|
});
|
|
}
|
|
|