Advertisement
Guest User

Untitled

a guest
Jun 26th, 2019
99
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.84 KB | None | 0 0
  1. // buffer to prevent positioning changes from happening right at edge of screen
  2. var buffer = 100;
  3.  
  4. // initial window offset
  5. var prevScrollPosition = window.pageYOffset;
  6.  
  7. // get Alert Bar height if present
  8. if($('#alertApp').length) {
  9. var alertBarHeight = $('#alertApp').outerHeight();
  10. } else {
  11. var alertBarHeight = 0;
  12. }
  13.  
  14. // get WP Admin Bar height if present
  15. if($('#wpadminbar').length) {
  16. var wpAdminBarHeight = $('#wpadminbar').outerHeight();
  17. } else {
  18. var wpAdminBarHeight = 0;
  19. }
  20.  
  21. // combined height of header + any ancillaries (alert bar, admin bar, etc)
  22. var headerHeight = $('header').outerHeight();
  23. var delta = headerHeight + alertBarHeight + wpAdminBarHeight;
  24.  
  25. var initialHeaderOffset = alertBarHeight + wpAdminBarHeight;
  26. var distanceFromTop, firstScroll, headerTopOffset, scrollPosition;
  27.  
  28. // determine if page is at top or lower down the page (i.e. refreshed) on page load
  29. if($(window).scrollTop() == 0) {
  30. firstScroll = true;
  31. } else {
  32. firstScroll = false;
  33. }
  34.  
  35.  
  36. $(window).scroll(function() {
  37. scrollPosition = $(this).scrollTop();
  38.  
  39. // if scrolling up -> show menu
  40. if (prevScrollPosition > scrollPosition) {
  41. $('header').addClass("sticky-header").css({"top": headerTopOffset});
  42. var headerPosition = $('header').offset().top - $(this).scrollTop();
  43. if(headerPosition >= 0) {
  44. $('header').css({"position": "fixed", "top": 0});
  45. firstScroll = false;
  46. distanceFromTop = window.pageYOffset;
  47. }
  48.  
  49. // if scrolling down from the top of the site, reposition header just above the
  50. // screen once user scrolls past it and any ancillaries (alert bar, admin bar, etc)
  51. } else if (firstScroll && scrollPosition > delta + buffer) {
  52. headerTopOffset = scrollPosition - (delta + buffer);
  53. $('header').css({"position": "absolute", "top": headerTopOffset});
  54. $('body').css({"padding-top": $('header').outerHeight()});
  55. firstScroll = false;
  56.  
  57. // if scrolling down after header is sticky, change positioning to absolute so it scrolls off screen
  58. // - - - THE PROBLEM MAY BE HERE - - -
  59. } else if (!firstScroll) {
  60. $('header').css({"position": "absolute", "top": distanceFromTop});
  61.  
  62.  
  63. // once scrolled past the header, position it just above the window so it
  64. // scrolls back into view when you scroll up
  65. if(($('header').offset().top + headerHeight + buffer) < scrollPosition) {
  66. headerTopOffset = scrollPosition - (delta + buffer);
  67. $('header').removeClass("sticky-header");
  68. }
  69. }
  70.  
  71. prevScrollPosition = scrollPosition;
  72.  
  73. // if scrolled all the way to the top -> reset back to original positions
  74. if(scrollPosition <= initialHeaderOffset) {
  75. $('header').css({"position": "relative"}).removeClass("sticky-header");
  76. $('body').css({"padding-top": 0});
  77. firstScroll = true;
  78. }
  79. });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement