src/chrome/common/extensions/docs/static/js/scroll.js

   1 // Copyright 2013 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 // Scroll handling.
   6 //
   7 // Switches the sidebar between floating on the left and position:fixed
   8 // depending on whether it's scrolled into view, and manages the scroll-to-top
   9 // button: click logic, and when to show it.
  10 (function() {
  11
  12 var sidebar = document.getElementById('gc-sidebar');
  13 var scrollToTop = document.getElementById('scroll-to-top');
  14 var offsetTop = sidebar.offsetTop;
  15
  16 function relayout() {
  17   // Obviously, this code executes every time the window scrolls, so avoid
  18   // putting things in here.
  19   var isFloatingSidebar = sidebar.classList.contains('floating');
  20   var isShowingScrollToTop = !scrollToTop.classList.contains('hidden');
  21
  22   var floatSidebar = false;
  23   var showScrollToTop = false;
  24
  25   if (window.scrollY > offsetTop) {
  26     // Scrolled past the top of the sidebar.
  27     if (window.innerHeight >= sidebar.scrollHeight) {
  28       // The whole sidebar fits in the window. Make it always visible.
  29       floatSidebar = true;
  30     } else {
  31       // Whole sidebar doesn't fit, so show the scroll-to-top button instead.
  32       showScrollToTop = true;
  33     }
  34   }
  35
  36   if (floatSidebar != isFloatingSidebar)
  37     sidebar.classList.toggle('floating', floatSidebar);
  38   if (isShowingScrollToTop != showScrollToTop)
  39     scrollToTop.classList.toggle('hidden', !showScrollToTop);
  40 }
  41
  42 window.addEventListener('scroll', relayout);
  43 setTimeout(relayout, 0);
  44
  45 scrollToTop.addEventListener('click', function() {
  46   window.scrollTo(0, 0);
  47 });
  48
  49 }());