Difference between revisions of "Team:Dalhousie/test5"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+
<script src="https://2017.igem.org/Team:Dalhousie/js2"></script>
 +
 
 
</head>
 
</head>
−
<!--Life's Not Complete Without Art. (Expand Your Editor > ASCII Is Not Responsive ;)
 
−
 
 
−
 
−
          ^^        |        ^^
 
−
          ::        |        ::
 
−
  ^^    ::        |        ::    ^^
 
−
  ::    ::        |        ::    ::
 
−
    ::    ::        |        ::    ::
 
−
      ::    ::      |      ::    ::
 
−
        ::    ::  _/~\_  ::    ::
 
−
          ::  :::/    \:::  ::
 
−
            :::::(  TMR  ):::::
 
−
                  \ ___ /
 
−
            :::::/`  `\:::::
 
−
          ::    ::\o o/::    ::
 
−
        ::    ::  :":  ::    ::
 
−
      ::      ::  ` `  ::      ::
 
−
      ::      ::          ::      ::
 
−
    ::      ::            ::      :: 
 
−
    ^^      ::            ::      ^^
 
−
            ::            ::
 
−
            ^^            ^^
 
−
 
−
 
−
!-->
 
  
 
<body>
 
<body>
 +
<script src="https://2017.igem.org/Team:Dalhousie/js2"> </script>
 
<header class="header">
 
<header class="header">
 
<div id="logo">Logo</div>
 
<div id="logo">Logo</div>
Line 901: Line 878:
 
</style>
 
</style>
  
−
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 
−
<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>
 
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 17:12, 10 September 2017

Alternating Fixed Navigation

Click A Menu Item Below

Scroll Up / Down

Totally Inspired By This

Altered & Customized By Me