• Вертикальный Slick slider на весь экран. Как сделать чтобы после слайда показывался футер?

    @fixeri
    Как-то так
    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
      <style type="text/css">
        .slide { height: 100vh; background: red; border-top: 1px solid blue; }
        .footer { height: 300px; background: orange; }
        #btn { position: fixed; top:0; z-index: 3; left:50%; 
              transform: translateX(-50%); width: 50px; height: 50px;  }
      </style>
    </head>
    <body>
      <button style="display: block;" id="btn">X</button>
      <div class="row">
        <div class="slide"> 1 slide </div>
        <div class="slide"> 2 slide </div>
        <div class="slide"> 3 slide </div>
        <div class="slide"> 4 slide </div>
        <div class="slide"> 5 slide </div>
        <div class="slide footer"> footer </div>
      </div>
      <script type="text/javascript">

    "use strict";
    
        let page = {
          pageYOffset: 0
        };
    
        let coordsElements = Array.from(document.querySelectorAll(".slide"), (item) => item.getBoundingClientRect());
        let elementsLength = coordsElements.length;
        let height = coordsElements[0].height;
        let btn = document.getElementById("btn");
        window.addEventListener("scroll", () => {
          let Y = window.pageYOffset;
          if (page.pageYOffset > window.pageYOffset) {
            page.pageYOffset = window.pageYOffset;
    
            for (let i = elementsLength; i >= 1; i--) {
              if (Y < height * i && Y > height * (i-1)) {
                if (btn.style.display !== "block") btn.style.display = "block";
                return window.scrollTo({ top: height * (i-1), behavior: "auto" });
              }
            }
          } else {
            page.pageYOffset = window.pageYOffset;
    
            for (let i = 1; i <= elementsLength; i++) {
    
                if (Y > height * (i-1) && height * i > Y) {
                  if (Y > height * (elementsLength - 2) && btn.style.display !== "none") {
                    btn.style.display = "none";
                  }
                  return window.scrollTo({ top: height * i, behavior: "auto" });
                }
            }
          }
        });

    </script>
    </body>
    </html>
    Ответ написан
    Комментировать