Difference between revisions of "Team:Dalhousie/test5"

Line 60: Line 60:
 
<!--------------------------------------------------------------test------------------------------------------------------------------------------>
 
<!--------------------------------------------------------------test------------------------------------------------------------------------------>
 
<body>
 
<body>
 +
<script>
 +
jQuery(document).ready(function($){
 +
var secondaryNav = $('.alt-nav'),
 +
secondaryNavTopPosition = secondaryNav.offset().top,
 +
taglineOffesetTop = $('#page-intro_text').offset().top + $('#page-intro_text').height() + parseInt($('#page-intro_text').css('paddingTop').replace('px', '')),
 +
contentSections = $('.section');
 +
 +
$(window).on('scroll', function(){
 +
( $(window).scrollTop() > taglineOffesetTop ) ? $('#logo, .pageBtn').addClass('is-hidden') : $('#logo, .pageBtn').removeClass('is- hidden');
 +
if($(window).scrollTop() > secondaryNavTopPosition ) {
 +
secondaryNav.addClass('is-fixed');
 +
$('.main').addClass('has-top-margin');
 +
setTimeout(function() {
 +
            secondaryNav.addClass('animate-children');
 +
            $('#logo').addClass('slide-in');
 +
$('.pageBtn').addClass('slide-in');
 +
        }, 50);
 +
} else {
 +
secondaryNav.removeClass('is-fixed');
 +
$('.main').removeClass('has-top-margin');
 +
setTimeout(function() {
 +
            secondaryNav.removeClass('animate-children');
 +
            $('#logo').removeClass('slide-in');
 +
$('.pageBtn').removeClass('slide-in');
 +
        }, 50);
 +
}
 +
 +
updateSecondaryNavigation();
 +
});
 +
 +
function updateSecondaryNavigation() {
 +
contentSections.each(function(){
 +
var actual = $(this),
 +
actualHeight = actual.height() + parseInt(actual.css('paddingTop').replace('px', '')) + parseInt(actual.css('paddingBottom').replace('px', '')),
 +
actualAnchor = secondaryNav.find('a[href="#'+actual.attr('id')+'"]');
 +
if ( ( actual.offset().top - secondaryNav.height() <= $(window).scrollTop() ) && ( actual.offset().top +  actualHeight - secondaryNav.height() > $(window).scrollTop() ) ) {
 +
actualAnchor.addClass('active');
 +
}else {
 +
actualAnchor.removeClass('active');
 +
}
 +
});
 +
}
 +
$('.alt-nav-trigger').on('click', function(event){
 +
event.preventDefault();
 +
$(this).toggleClass('menu-is-open');
 +
secondaryNav.find('ul').toggleClass('is-visible');
 +
});
 +
secondaryNav.find('ul a').on('click', function(event){
 +
        event.preventDefault();
 +
        var target= $(this.hash);
 +
        $('body,html').animate({
 +
        'scrollTop': target.offset().top - secondaryNav.height() + 1
 +
        }, 400
 +
        );
 +
        $('.alt-nav-trigger').removeClass('menu-is-open');
 +
        secondaryNav.find('ul').removeClass('is-visible');
 +
    });
 +
$('.main-nav').on('click', function(event){
 +
if($(event.target).is('.main-nav')) $(this).children('ul').toggleClass('is-visible');
 +
});
 +
});
 +
</script>
 +
 
<header class="header">
 
<header class="header">
 
<div id="logo">Logo</div>
 
<div id="logo">Logo</div>

Revision as of 16:49, 10 September 2017

Alternating Fixed Navigation

Click A Menu Item Below

Scroll Up / Down

Totally Inspired By This

Altered & Customized By Me

Welcome to Dalhousie's 2017 iGEM wiki

Sponsor area