Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- stickScroll() {
- const blocks = document.getElementsByClassName("benefits__block"),
- images = document.getElementsByClassName("phone-images"),
- text = document.getElementsByClassName("benefits__content"),
- imagesWrap = document.getElementsByClassName("slided-phone");
- let backgroundPhonePosition = blocks[0].getBoundingClientRect().top; // позиция телефона
- if(backgroundPhonePosition < 0 && document.getElementsByClassName("benefits")[0].getBoundingClientRect().top * -1 < document.getElementsByClassName("benefits")[0].scrollHeight - window.innerHeight) { // фиксим телефон с картинками/видосами
- // фикс телефона, если он в области экрана
- imagesWrap[0].classList.remove("bottom");
- imagesWrap[0].style.position = "fixed";
- } else {
- // если скролим наверх
- imagesWrap[0].style.position = "absolute";
- }
- if (document.getElementsByClassName("benefits")[0].getBoundingClientRect().top * -1 > document.getElementsByClassName("benefits")[0].scrollHeight - window.innerHeight) {
- // если ушли за нижнюю границу блока, где лежит телефон
- imagesWrap[0].classList.add("bottom");
- }
- for (let i = 0; i < blocks.length; i += 1) {
- let blockPosition = blocks[i].getBoundingClientRect().top;
- if (blockPosition - 660 < 0) { // скролл текста, чтобы он был по центру экрана
- if (blocks[i].clientHeight - window.innerHeight < blockPosition * -1) {
- text[i].style.transform = "translateY(" + (blocks[i].clientHeight - window.innerHeight) + "px)";
- } else {
- text[i].style.transform = "translateY(" + (blockPosition > 0 ? 0 : blockPosition * -1) + "px)";
- }
- }
- if (blockPosition < 300) {
- this.activeBlock = i;
- this.blockClass = this.slidedPhones[i].class;
- if (images[i].clientHeight > 600) { // скролл картинок внутри телефона, если они больше 660пх
- 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)";
- }
- } else {
- images[i].style.transform = "translateY(" + 0 + "px)";
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement