Difference between revisions of "Team:SDU-Denmark/navbar/jquery"
| Line 1: | Line 1: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
function activateElement(element,menuElement){ | function activateElement(element,menuElement){ | ||
$('#menu1').removeClass("in"); | $('#menu1').removeClass("in"); | ||
| Line 45: | Line 30: | ||
menuElement.addClass("active"); | menuElement.addClass("active"); | ||
} | } | ||
| − | + | ||
| + | $(document).ready(function () { | ||
| + | $(document).on("scroll", onScroll); | ||
| + | function onScroll(event){ | ||
| + | var scrollPos = $(document).scrollTop(); | ||
| + | $('.tab-content a').each(function () { | ||
| + | var currLink = $(this); | ||
| + | var refElement = $(currLink.attr("href")); | ||
| + | if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { | ||
| + | $('.tab-content a').removeClass("active"); | ||
| + | currLink.addClass("active"); | ||
| + | |||
| + | |||
if ((currLink.attr('href') === "#presentation" || currLink.attr('href') === "#team" || currLink.attr('href') === "#attributions" || currLink.attr('href') === "#collaborations" || currLink.attr('href') === "#achievements") && !$('#menu1').hasClass("active")){ | if ((currLink.attr('href') === "#presentation" || currLink.attr('href') === "#team" || currLink.attr('href') === "#attributions" || currLink.attr('href') === "#collaborations" || currLink.attr('href') === "#achievements") && !$('#menu1').hasClass("active")){ | ||
activateElement($('#menu1'),$('#navbarPresentation')); | activateElement($('#menu1'),$('#navbarPresentation')); | ||
| Line 54: | Line 51: | ||
else if ((currLink.attr('href') === "#project" || currLink.attr('href') === "#design" || currLink.attr('href') === "#modelling" || currLink.attr('href') === "#experiments" || currLink.attr('href') === "#demonstration") && !$('#menu3').hasClass("active")){ | else if ((currLink.attr('href') === "#project" || currLink.attr('href') === "#design" || currLink.attr('href') === "#modelling" || currLink.attr('href') === "#experiments" || currLink.attr('href') === "#demonstration") && !$('#menu3').hasClass("active")){ | ||
activateElement($('#menu3'),$('#navbarProject')); | activateElement($('#menu3'),$('#navbarProject')); | ||
| − | } | + | } |
else if ((currLink.attr('href') === "#procedures" || currLink.attr('href') === "#parts" || currLink.attr('href') === "#notebook" || currLink.attr('href') === "#protocols" || currLink.attr('href') === "#labsafety") && !$('#menu4').hasClass("active")){ | else if ((currLink.attr('href') === "#procedures" || currLink.attr('href') === "#parts" || currLink.attr('href') === "#notebook" || currLink.attr('href') === "#protocols" || currLink.attr('href') === "#labsafety") && !$('#menu4').hasClass("active")){ | ||
activateElement($('#menu4'),$('#navbarProcedures')); | activateElement($('#menu4'),$('#navbarProcedures')); | ||
| Line 64: | Line 61: | ||
activateElement($('#menu6'),$('#navbarProspects')); | activateElement($('#menu6'),$('#navbarProspects')); | ||
} | } | ||
| + | } | ||
| + | |||
| + | |||
}); | }); | ||
} | } | ||
}); | }); | ||
Revision as of 13:59, 15 August 2017
function activateElement(element,menuElement){
$('#menu1').removeClass("in");
$('#menu1').removeClass("active");
$('#menu2').removeClass("active");
$('#menu2').removeClass("in");
$('#menu3').removeClass("active");
$('#menu3').removeClass("in");
$('#menu4').removeClass("active");
$('#menu4').removeClass("in");
$('#menu5').removeClass("active");
$('#menu5').removeClass("in");
$('#menu6').removeClass("active");
$('#menu6').removeClass("in");
$('#navbarPresentation').removeClass("active");
$('#navbarIntroduction').removeClass("active");
$('#navbarProject').removeClass("active");
$('#navbarProcedures').removeClass("active");
$('#navbarPractices').removeClass("active");
$('#navbarProspects').removeClass("active");
element.addClass("active");
element.addClass("in");
menuElement.addClass("active");
}
$(document).ready(function () {
$(document).on("scroll", onScroll);
function onScroll(event){
var scrollPos = $(document).scrollTop();
$('.tab-content a').each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.tab-content a').removeClass("active");
currLink.addClass("active");
if ((currLink.attr('href') === "#presentation" || currLink.attr('href') === "#team" || currLink.attr('href') === "#attributions" || currLink.attr('href') === "#collaborations" || currLink.attr('href') === "#achievements") && !$('#menu1').hasClass("active")){
activateElement($('#menu1'),$('#navbarPresentation'));
}
else if ((currLink.attr('href') === "#introduction" || currLink.attr('href') === "#description" || currLink.attr('href') === "#outreach") && !$('#menu2').hasClass("active")){
activateElement($('#menu2'),$('#navbarIntroduction'));
}
else if ((currLink.attr('href') === "#project" || currLink.attr('href') === "#design" || currLink.attr('href') === "#modelling" || currLink.attr('href') === "#experiments" || currLink.attr('href') === "#demonstration") && !$('#menu3').hasClass("active")){
activateElement($('#menu3'),$('#navbarProject'));
}
else if ((currLink.attr('href') === "#procedures" || currLink.attr('href') === "#parts" || currLink.attr('href') === "#notebook" || currLink.attr('href') === "#protocols" || currLink.attr('href') === "#labsafety") && !$('#menu4').hasClass("active")){
activateElement($('#menu4'),$('#navbarProcedures'));
}
else if ((currLink.attr('href') === "#practices" || currLink.attr('href') === "#bioethics" || currLink.attr('href') === "#integrated" || currLink.attr('href') === "#events") && !$('#menu5').hasClass("active")){
activateElement($('#menu5'),$('#navbarPractices'));
}
else if ((currLink.attr('href') === "#prospects" || currLink.attr('href') === "#perspectives" || currLink.attr('href') === "#future" || currLink.attr('href') === "#final") && !$('#menu6').hasClass("active")){
activateElement($('#menu6'),$('#navbarProspects'));
}
}
}); }
});
