header.js 996 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. ( function() {
  2. var body, header, content;
  3. body = document.body;
  4. header = document.getElementById( 'masthead' );
  5. content = document.getElementById( 'content' );
  6. /* Add a padding top equivalend to #masthead's height to #content depending on the screen width (breakpoint 600px) */
  7. function contentPadding() {
  8. content.removeAttribute( 'style' );
  9. if ( body.clientWidth >= 896 ) {
  10. content.style.paddingTop = header.offsetHeight + 'px';
  11. } else {
  12. content.removeAttribute( 'style' );
  13. }
  14. }
  15. window.onload = contentPadding;
  16. /* Recalculate contentPadding() on screen resize after 600ms */
  17. function contentPaddingResize() {
  18. setTimeout( contentPadding , 600);
  19. }
  20. window.onresize = contentPaddingResize;
  21. /* Toggle body 'scrolling' class when scrolling */
  22. function scrollPage() {
  23. if ( window.pageYOffset > 0 ) {
  24. body.classList.add( 'scrolling' );
  25. } else {
  26. body.classList.remove( 'scrolling' );
  27. }
  28. }
  29. window.onscroll = scrollPage;
  30. } )();