Team:Toronto/scripts/stickynav

From 2014.igem.org


var viewHeight;

var $window = $(window); var $body = $('body'); var $contentWrapper = $('#main'); var $content = $('#main-inner'); var minHeaderHeight = $navHeight; // the height of the "visible part"

var lastWindowHeight = $window.height(); // save window height to calculate difference in height on resize

console.log('vh' + viewHeight);

checkScroll(); // make sure scroll and all heights are correct on first load stickyTop(); // make sure sticky top is used if needed on first load

$window.resize(function() {

   checkScroll();
   stickyTop();

}); $window.scroll(function() {

   stickyTop();

});

function checkScroll() {

   var newWindowHeight = $window.height();
   var windowHeightDif = newWindowHeight - lastWindowHeight;
   lastWindowHeight = newWindowHeight; // save current height for next call
   //var contentHeight = $content.height();
   var contentHeight = viewHeight;
   console.log('contentHeight: ' + contentHeight);
   $contentWrapper.height(contentHeight);         // make sure wrapper will show entire content
   $body.height(newWindowHeight + contentHeight); // allow content to be scrolled off the screen by
                                                  // pushing content down by the amount of window height
   windowScrollTop2 = $window.scrollTop();
   console.log(windowScrollTop2);
   if (windowScrollTop2 > 0) {       
   	console.log('3: '  + windowScrollTop2 + '; '+ windowHeightDif);                         // don't scroll if at top to avoid video getting covered
       $window.scrollTop(topDist.top);
       console.log('4: ' + $window.scrollTop()); 
       //$window.scrollTop(windowScrollTop2 + windowHeightDif); // scroll by window height difference to keep content 
                                                             // in the same position on window resize
   }

}

function pushScrollToTop() { console.log("stuff!!"); $window.scrollTop(topDist.top); console.log($window.scrollTop()); }

function stickyTop() {

   windowScrollTop = $window.scrollTop();
   var maxScroll = ($window.height() - minHeaderHeight);
   if (windowScrollTop >= maxScroll) {
       $contentWrapper.css('position', 'fixed').css('top', minHeaderHeight); // stop wrapper top at bottom of header
       //console.log("did stuff");
   } else {
       $contentWrapper.css('position', 'absolute').css('top', ); // allow regular scrolling
       //console.log("did stuff2");
   }
   if ($contentWrapper.css('position') === 'fixed') {       // if wrapper is fixed,
       $content.css('top', -(windowScrollTop - maxScroll)); // continue scrolling by shifting content up
       //console.log("did stuff3");
   } else {
       $content.css('top', 0); // make sure content is lined up with wrapper
       //console.log("did stuff4");
   }

}