103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
/*
|
|
* Fixed Navbar Scrolling
|
|
* Github: https://github.com/ts-de/bootstrap4-fixed-navbar
|
|
*/
|
|
|
|
|
|
// init nav object from dom
|
|
var nav = $('.nav_inside_container');
|
|
// get heigth of the nav
|
|
var navHeight = 96;
|
|
|
|
$(document).ready(function(){
|
|
// click-trigger
|
|
$('.nav_inside > li > a').click(function(event) {
|
|
scrollToSection(this);
|
|
event.preventDefault();
|
|
});
|
|
|
|
});
|
|
|
|
// scroll-trigger
|
|
$(document).scroll(function() {
|
|
activateCurrentSection();
|
|
});
|
|
|
|
// get target position and scrolls to it
|
|
function scrollToSection(self) {
|
|
// get the target href
|
|
var href = $(self).attr('href');
|
|
|
|
// get the target position
|
|
var targetPos = $(href).offset().top - navHeight - 260;
|
|
|
|
// scroll to target
|
|
$('html, body').animate({
|
|
scrollTop: targetPos
|
|
}, 800);
|
|
}
|
|
|
|
|
|
/*
|
|
* Updates active section on scroll
|
|
*/
|
|
// scroll-trigger
|
|
$(document).scroll(function() {
|
|
activateCurrentSection();
|
|
});
|
|
|
|
/*
|
|
* Updates active section on scroll
|
|
*/
|
|
function activateCurrentSection() {
|
|
var id; // init the id of the element that will be activated
|
|
|
|
// get all sections
|
|
var sections = $('.tab-pane.active .section');
|
|
|
|
// store current position on the page when scroll is triggered
|
|
var pos = $(document).scrollTop();
|
|
|
|
/*
|
|
* Exception: if last section is <100% of the screen height
|
|
* make it active when 50% of it is visible.
|
|
* Otherwise the last section would never activate.
|
|
*/
|
|
var lastSection = sections[sections.length-1]; // get last section
|
|
var lastSectionTooSmall = $(lastSection).height() < $(window).height();
|
|
|
|
if (lastSectionTooSmall) {
|
|
var lastSectionTopPos = $(lastSection).offset().top;
|
|
// lastSectionTriggerPos is true if 50% of the last section is visible
|
|
var lastSectionTriggerPos = $(window).height() + $(document).scrollTop() - ($(lastSection).height()/2);
|
|
var lastSectionInView = lastSectionTriggerPos > lastSectionTopPos;
|
|
}
|
|
|
|
if (lastSectionTooSmall && lastSectionInView) {
|
|
id = $(lastSection).attr('id');
|
|
} else { // else last section is >= 100% of the view check all sections to find the top one
|
|
sections.each(function() {
|
|
var top = $(this).offset().top - navHeight - 280; // get the top & bottom position of the section
|
|
var bottom = top + $(this).outerHeight();
|
|
|
|
/*
|
|
* if the current position is higher (deeper on the page) than the top of the section
|
|
* and it is smaller (heiger on the page) than the bottom of the section
|
|
* it is the active section.
|
|
*/
|
|
if (pos >= top && pos <= bottom) {
|
|
id = $(this).attr('id'); // store the id of this section
|
|
}
|
|
});
|
|
}
|
|
|
|
/*
|
|
if an id was set before, activate the section in the nav
|
|
*/
|
|
|
|
if (id) {
|
|
$('.nav_inside > li > a').parent('li').removeClass('active');
|
|
$('.nav_inside > li > a[href="#' + id + '"]').parent('li').addClass('active');
|
|
}
|
|
}
|