Advertisement
Guest User

Untitled

a guest
Mar 22nd, 2017
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.73 KB | None | 0 0
  1. var Sticky = function(selector, containerSelector) {
  2. var element = document.querySelector(selector),
  3. containerElement = document.querySelector(containerSelector),
  4.  
  5. elementTop = parseInt(window.getComputedStyle(element, null).marginTop),
  6.  
  7. stickedClass = 'sticked',
  8. grabEndClass = 'grab-end',
  9.  
  10. elementStart, containerElementFinish;
  11.  
  12. if (!canSticky) {
  13. return;
  14. }
  15.  
  16. setPoints();
  17.  
  18. window.addEventListener('scroll', function() {
  19. if (window.scrollY >= elementStart && window.scrollY < containerElementFinish) {
  20. sticky();
  21. } else if (window.scrollY >= containerElementFinish) {
  22. grabEnd();
  23. } else {
  24. reset();
  25. }
  26. });
  27.  
  28. // Private
  29. function offset(element) {
  30. var rectangle = element.getBoundingClientRect();
  31.  
  32. return {
  33. top: rectangle.top + document.body.scrollTop,
  34. left: rectangle.left + document.body.scrollLeft
  35. }
  36. }
  37.  
  38. function canSticky() {
  39. if (!element && !containerElement) {
  40. return false;
  41. }
  42.  
  43. if (window.innerHeight <= 710 || window.innerWidth <= 768) {
  44. return false;
  45. }
  46.  
  47. return true;
  48. }
  49.  
  50.  
  51. // Public
  52. function reset() {
  53. element.classList.remove(stickedClass, grabEndClass);
  54. setPoints();
  55. }
  56.  
  57. function sticky() {
  58. element.classList.remove(grabEndClass);
  59. element.classList.add(stickedClass);
  60. }
  61.  
  62. function grabEnd() {
  63. element.classList.remove(stickedClass);
  64. element.classList.add(grabEndClass);
  65. }
  66.  
  67. function setPoints() {
  68. elementStart = offset(element).top - elementTop;
  69. containerElementFinish = offset(containerElement).top + containerElement.offsetHeight - element.offsetHeight - elementTop;
  70. }
  71.  
  72. return {
  73. reset: reset,
  74. sticky: sticky,
  75. grabEnd: grabEnd,
  76. setPoints: setPoints
  77. };
  78. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement