Difference between revisions of "Team:SDU-Denmark/navbar/jquery"
| Line 29: | Line 29: | ||
element.addClass("in"); | element.addClass("in"); | ||
menuElement.addClass("active"); | menuElement.addClass("active"); | ||
| − | + | } | |
| + | |||
$(document).ready(function () { | $(document).ready(function () { | ||
$(document).on("scroll", onScroll); | $(document).on("scroll", onScroll); | ||
function onScroll(event){ | function onScroll(event){ | ||
| − | + | var scrollPos = $(document).scrollTop(); | |
$('.tab-content a').each(function () { | $('.tab-content a').each(function () { | ||
var currLink = $(this); | var currLink = $(this); | ||
var refElement = $(currLink.attr("href")); | var refElement = $(currLink.attr("href")); | ||
| − | + | if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { | |
$('.tab-content a').removeClass("active"); | $('.tab-content a').removeClass("active"); | ||
currLink.addClass("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')); | ||
| − | } | + | } |
else if ((currLink.attr('href') === "#introduction" || currLink.attr('href') === "#description" || currLink.attr('href') === "#outreach") && !$('#menu2').hasClass("active")){ | else if ((currLink.attr('href') === "#introduction" || currLink.attr('href') === "#description" || currLink.attr('href') === "#outreach") && !$('#menu2').hasClass("active")){ | ||
activateElement($('#menu2'),$('#navbarIntroduction')); | activateElement($('#menu2'),$('#navbarIntroduction')); | ||
| Line 61: | Line 61: | ||
activateElement($('#menu6'),$('#navbarProspects')); | activateElement($('#menu6'),$('#navbarProspects')); | ||
} | } | ||
| − | + | } | |
| + | }); | ||
| + | } | ||
| + | |||
| − | |||
| − | |||
| − | |||
| − | |||
$(document).on("scroll", onScroll); | $(document).on("scroll", onScroll); | ||
$('.tab-content a[href*="#"]').on('click', function (e) { | $('.tab-content a[href*="#"]').on('click', function (e) { | ||
| Line 72: | Line 71: | ||
var $target = $(target); | var $target = $(target); | ||
$('html, body').stop().animate({ | $('html, body').stop().animate({ | ||
| − | 'scrollTop': $target.offset().top | + | 'scrollTop': $target.offset().top-50 |
}, 500, 'swing', function () { | }, 500, 'swing', function () { | ||
Revision as of 08:49, 25 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'));
}
}
});
}
$(document).on("scroll", onScroll);
$('.tab-content a[href*="#"]').on('click', function (e) {
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-50
}, 500, 'swing', function () {
}); });
});
