Advertisement
Guest User

Untitled

a guest
Jul 17th, 2019
97
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.42 KB | None | 0 0
  1. stickScroll() {
  2. const blocks = document.getElementsByClassName("benefits__block"),
  3. images = document.getElementsByClassName("phone-images"),
  4. text = document.getElementsByClassName("benefits__content"),
  5. imagesWrap = document.getElementsByClassName("slided-phone");
  6.  
  7. let backgroundPhonePosition = blocks[0].getBoundingClientRect().top; // позиция телефона
  8.  
  9. if(backgroundPhonePosition < 0 && document.getElementsByClassName("benefits")[0].getBoundingClientRect().top * -1 < document.getElementsByClassName("benefits")[0].scrollHeight - window.innerHeight) { // фиксим телефон с картинками/видосами
  10. // фикс телефона, если он в области экрана
  11. imagesWrap[0].classList.remove("bottom");
  12. imagesWrap[0].style.position = "fixed";
  13. } else {
  14. // если скролим наверх
  15. imagesWrap[0].style.position = "absolute";
  16. }
  17.  
  18. if (document.getElementsByClassName("benefits")[0].getBoundingClientRect().top * -1 > document.getElementsByClassName("benefits")[0].scrollHeight - window.innerHeight) {
  19. // если ушли за нижнюю границу блока, где лежит телефон
  20. imagesWrap[0].classList.add("bottom");
  21. }
  22.  
  23. for (let i = 0; i < blocks.length; i += 1) {
  24. let blockPosition = blocks[i].getBoundingClientRect().top;
  25.  
  26. if (blockPosition - 660 < 0) { // скролл текста, чтобы он был по центру экрана
  27. if (blocks[i].clientHeight - window.innerHeight < blockPosition * -1) {
  28. text[i].style.transform = "translateY(" + (blocks[i].clientHeight - window.innerHeight) + "px)";
  29. } else {
  30. text[i].style.transform = "translateY(" + (blockPosition > 0 ? 0 : blockPosition * -1) + "px)";
  31. }
  32. }
  33.  
  34. if (blockPosition < 300) {
  35. this.activeBlock = i;
  36. this.blockClass = this.slidedPhones[i].class;
  37.  
  38. if (images[i].clientHeight > 600) { // скролл картинок внутри телефона, если они больше 660пх
  39. images[i].style.transform = "translateY(" + ((blockPosition * -1) > images[i].clientHeight - document.getElementsByClassName("slided-phone")[0].clientHeight ? ((images[i].clientHeight - document.getElementsByClassName("slided-phone")[0].clientHeight) * -1) : (blockPosition < 0 ? blockPosition : 0)) + "px)";
  40. }
  41. } else {
  42. images[i].style.transform = "translateY(" + 0 + "px)";
  43. }
  44. }
  45. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement