×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

Fixed header and space bar page scroll

0
0
 
0
Language: Javascript
Posted by: Srinivasan Pusuluri
Added: Apr 23, 2014 5:14 AM
Modified: Apr 23, 2014 5:16 AM
Views: 1767
Tags: no tags
  1. var doc = document.documentElement;
  2. var readAssistOffset = 40; // might need finessing
  3. var duration = 250; // might need finessing
  4.  
  5. keydown = function (e) {
  6.  
  7.         var curElement = document.activeElement.nodeName;
  8.  
  9.         if ((e.keyCode === 32 && curElement === "BODY") || (e.keyCode === 33 || e.keyCode === 34)) {
  10.  
  11.                 var viewportHeight = window.innerHeight;
  12.                 var stickyHeaderHeight = document.getElementById('sticky-header').offsetHeight;
  13.                 var newViewportHeight = viewportHeight - stickyHeaderHeight - readAssistOffset;
  14.        
  15.                 e.preventDefault();
  16.                
  17.                 if(e) {
  18.                
  19.                         isShift = e.shiftKey || e.keyCode === 33 ? true : false;
  20.                
  21.                 } else {
  22.                        
  23.                         isShift = window.event.shiftKey || e.keyCode === 33 ? true : false;
  24.                        
  25.                 };
  26.        
  27.                 currScrollPosition = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
  28.        
  29.                 scrollToHere = newViewportHeight + currScrollPosition;
  30.        
  31.                 if (isShift) {
  32.                
  33.                         scrollToHere = currScrollPosition - newViewportHeight;
  34.                
  35.                 }
  36.        
  37.                 smoothScrollTo(scrollToHere)
  38.        
  39.         }
  40.  
  41. }
  42.  
  43. window.smoothScrollTo = (function () {
  44.  
  45.         var timer, start, factor;
  46.  
  47.         return function (target) {
  48.  
  49.                 var offset = window.pageYOffset,
  50.                         delta = target - window.pageYOffset;
  51.                
  52.                 start = Date.now();
  53.  
  54.                 factor = 0;
  55.        
  56.                 if( timer ) {
  57.  
  58.                         clearInterval(timer);
  59.  
  60.                 }
  61.        
  62.                 function step() {
  63.  
  64.                         var y;
  65.  
  66.                         factor = (Date.now() - start) / duration;
  67.  
  68.                         if( factor >= 1 ) {
  69.  
  70.                                 clearInterval(timer);
  71.                                 factor = 1;
  72.  
  73.                         }
  74.  
  75.                         y = factor * delta + offset;
  76.  
  77.                         window.scrollBy(0, y - window.pageYOffset);
  78.  
  79.                 }
  80.        
  81.                 timer = setInterval(step, 10);
  82.  
  83.                 return timer;
  84.  
  85.         };
  86.  
  87. }());
  88.  
  89. window.onkeydown = keydown;

Write a comment

To post comments, please log in or register.