Я хочу создать раздел к разделу прокрутки с помощью jquery без какого-либо плагина - PullRequest
Новая
       27

Я хочу создать раздел к разделу прокрутки с помощью jquery без какого-либо плагина

0 голосов
/ 20 ноября 2018

Я хочу прокрутить раздел с помощью анимации на моей странице с помощью кода jquery.Я написал код, чтобы найти каждый раздел сверху и снизу и получить текущий раздел через него, и анимация также работает, но есть некоторые проблемы при прокрутке, поскольку она немного шаткая и боковая прокрутка полностью застряла, анимация все еще работает, покав этом нет необходимости. Я добавляю ссылку на кодовую ссылку, пожалуйста, помогите мне с этим. Я объясню часть своего кода, поскольку я использовал объект для хранения каждого раздела сверху и снизу и помещаю их в массив, используя этот массив, который я нахожутекущий раздел моей страницы, при прокрутке вниз, если верхняя часть следующего раздела меньше нижней части моего окна, затем прокрутка анимации работает, аналогично, при прокрутке вверх она находит нижнюю часть предыдущего раздела и вычитает высоту окна и прокручивает анимацию до этой вершины.you.Please найти ссылку codepen."https://codepen.io/anon/pen/jQazdo?editors=1010"

$(document).ready(function() {
  (function() {
    var sectionData = [];
    var lastScrollTop = 0;
    var currentSection = 0;
    getElementPosition();
    console.log(sectionData);
    $(window).scroll(function(event) {

      var st = $(this).scrollTop();
      var windowTopPos = $(window).scrollTop();
      var windowBottomPos = $(window).scrollTop() + $(window).height();
      if (st > lastScrollTop) {
        // downscroll code
        console.log("down");
        getPresentSection(windowTopPos);
        if (currentSection < sectionData.length - 1) {
          console.log('top-current', currentSection);
          if (sectionData[currentSection + 1].top <= windowBottomPos) {
            $('html, body').animate({
              scrollTop: sectionData[currentSection + 1].top + 10
            }, 500);
            // st = 0;

          }
        }
      } else {
        // upscroll code
        console.log("up");
        getPresentSection(windowTopPos);

        if (currentSection > -1) {
          if (sectionData[currentSection].bottom >= windowTopPos) {
            $('html, body').animate({
              scrollTop: sectionData[currentSection].bottom - $(window).height()
            }, 500);
          }
        }


        // console.log(currentSection);
      }
      lastScrollTop = st;
      $(window).bind("mousewheel", function() {
        $("html, body").stop();
      });
    });

    function getPresentSection(st) {
      for (var i = 0; i < sectionData.length; i++) {
        if (sectionData[i].top <= st && st <= sectionData[i].bottom) {
          currentSection = i;
          return false;
        }
      }
    }

    function getElementPosition() {
      $('.section-to-scroll').each(function() {
        var position = {
          top: $(this).offset().top,
          bottom: $(this).offset().top + $(this).outerHeight(true)
        }
        sectionData.push(position);
      });
    }

  })();

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .section-to-scroll:nth-child(odd) {
      background: rgb(118, 118, 194);
      height: 160vh;
    }
    
    .section-to-scroll:nth-child(even) {
      background: rgb(78, 177, 152);
      height: 90vh;
    }
    
    .section-to-scroll {
      width: 100%;
      display: block;
    }
    
    body {
      border: 0;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="section-to-scroll"></div>
  <div class="section-to-scroll"></div>
  <div class="section-to-scroll"></div>
  <div class="section-to-scroll"></div>
  <div class="section-to-scroll"></div>
</body>
<script src="script.js"></script>

</html>
...