Почему моя JS Waypoint не обновляет навигационную панель должным образом при прокрутке вверх? - PullRequest
0 голосов
/ 15 апреля 2020

Я пытаюсь обновить навигационную панель в зависимости от раздела, на который в данный момент смотрит пользователь.

Он отлично работает, спускаясь вниз, однако прокрутка вверх не работает должным образом, мне нужно немного прокрутить вверх более чем через верх для его правильного обновления.

Вот GIF-файл, показывающий, что я имею в виду: https://imgur.com/a68d1HT

Вот мое приложение. JS:

var Controller = (function() {
    setInterval(UIController.changeTitle, 4000);
    UIController.showNav();
    UIController.updateNav();
});
//-----------------------------------------------------------
var UIController = (function() {

    text =["你好!", "こんにちは!", "Привет!", "Hello!"],
    counter = 0,
    elem = document.getElementById("changeText")

    return {
        changeTitle: (function() {
            elem.classList.add('hide');
            setTimeout(function () {
                elem.innerHTML = text[counter];
                elem.classList.remove('hide');
                counter++;
                if (counter >= text.length) {
                    counter = 0;
                }
            }, 500);
            }),
        showNav: (function(){
                window.onscroll = function() {
                    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
                        document.getElementById("nav-bar").style.opacity = "100";
                        document.getElementById("nav-bar").style.pointerEvents = "all";
                      } else {
                        document.getElementById("nav-bar").style.opacity = "0";
                        document.getElementById("nav-bar").style.pointerEvents = "none";
                      }
                }
        }),
        updateNav: (function(){
          var waypoint1 = new Waypoint({
            element: document.getElementById('aboutSection'),
            handler: function(direction) {
              if (direction === 'down') {
                document.getElementById("about-link").classList.add("nav-bar__ul__nav-link__active");
              } else {
                offset: '100%'
                document.getElementById("portfolio-link").classList.remove("nav-bar__ul__nav-link__active");
                document.getElementById("about-link").classList.add("nav-bar__ul__nav-link__active");
             }
            }})
            var waypoint2 = new Waypoint({
              element: document.getElementById('portfolioSection'),
              handler: function(direction) {
                if (direction === 'down') {
                  document.getElementById("about-link").classList.remove("nav-bar__ul__nav-link__active");
                  document.getElementById("portfolio-link").classList.add("nav-bar__ul__nav-link__active");
                } else {
                  offset: '100%'
                  document.getElementById("personal-link").classList.remove("nav-bar__ul__nav-link__active");
                  document.getElementById("portfolio-link").classList.add("nav-bar__ul__nav-link__active");
               }
              }})
              var waypoint3 = new Waypoint({
                element: document.getElementById('personalSection'),
                handler: function(direction) {
                  if (direction === 'down') {
                    document.getElementById("portfolio-link").classList.remove("nav-bar__ul__nav-link__active");
                    document.getElementById("personal-link").classList.add("nav-bar__ul__nav-link__active");
                  } else {
                    offset: '100%'
                    document.getElementById("contact-link").classList.remove("nav-bar__ul__nav-link__active");
                    document.getElementById("personal-link").classList.add("nav-bar__ul__nav-link__active");
                 }
                }})
                var waypoint4 = new Waypoint({
                  element: document.getElementById('contactSection'),
                  handler: function(direction) {
                    if (direction === 'down') {
                      document.getElementById("personal-link").classList.remove("nav-bar__ul__nav-link__active");
                      document.getElementById("contact-link").classList.add("nav-bar__ul__nav-link__active");
                    } else {
                      offset: '100%'
                      document.getElementById("contact-link").classList.add("nav-bar__ul__nav-link__active");
                   }
                  }})
            }
        )
        }

})();

Controller();

S CSS:

*, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
    font-family: 'Noto Sans SC', sans-serif;
    font-size: 10px;
    scroll-snap-type: y mandatory;
}

html, body {
    height: 100%;
}

#changeText {
    opacity: 1;
    transition: all 1s;
}
.hide {
    opacity: 0 !important;
}

section {
    scroll-snap-align: start;
  }

.scroll-icon {
    margin-top: 300px;
    position: absolute;
    display: block;
    font-size: 0.933rem;
    color: black;
    text-decoration: none;
    padding: 10px 10px 10px 40px;
    &::before {
      display: block;
      position: absolute;
      top:-2px;
      left:0;
      width: 24px;
      height: 40px;
      border: 5px solid black;
      border-radius: 12px;
      content:"";
    }
    &::after {
      display: block;
      position: absolute;
      top:9px;
      left:11px;
      width: 2px;
      height: 8px;
      background: black;
      border-radius: 1px;
      content:"";
      animation-name: scroll;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-delay: 2s;
    }
  }

  @keyframes scroll {
    0% { opacity: 1; height: 8px;}
    20% { opacity: 1; height: 8px;}
    30% { transform: translateY(0); opacity: 1; height: 19px;}
    40% { opacity: 1;}
    80% { transform: translateY(19px); opacity: 0; height: 0;}
    81% { transform: translateY(0); opacity: 0; height: 8px;}
    100% { opacity: 1; height: 8px;}
  }

.nav-bar {
    height: 10vh;
    width: 100%;
    position: fixed;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: opacity .5s;
    opacity: 0;
    pointer-events: none;

    &__logo {
        font-size: 2rem;
        margin-left: 50px;
        font-family: 'Raleway', sans-serif;
    }
    &__ul {
        display: flex;
        flex-direction: row;
        width: auto;

        &__nav-link {
            text-decoration: none;
            list-style: none;
            margin-right: 50px;
            font-size: 2rem;
            cursor: pointer;
            font-family: 'Raleway', sans-serif;
            position: relative;
            color: black;
            border: solid 5px transparent;
            padding: 5px;

            &__active {
                border: solid 5px black;
                border-radius: 10px;
            }
        }


        &__nav-link:hover {
            color: black;
        }

        &__nav-link:hover:before {
            visibility: visible;
            background-color: black;
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
        }

        &__nav-link:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 3px;
            bottom: -5px;
            left: 0;
            background-color: #333;
            visibility: hidden;
            -webkit-transform: scaleX(0);
            transform: scaleX(0);
            -webkit-transition: all 0.3s ease-in-out 0s;
            transition: all 0.3s ease-in-out 0s;
        }


    }
}

section {
    width: 100%;
    height: 100vh;
}

.banner {
    height: 10vh;
    width: 100%;
}

.landing-section {
    display: flex;
    align-items: center;
    justify-content: center;

    &__header {
        font-size: 10rem;
        font-weight: bold;
        opacity: 1;
        transition: opacity 0.5s;
    }
}

.portfolio-section, .personal-section, .contact-section, .about-section {

}

.about-section {
    background-color: hotpink;
}

.portfolio-section {
    background-color: red;
}

.personal-section {
    background-color: green;
}

.contact-section {
    background-color: purple;
}

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Raleway:900&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC|Raleway:900&display=swap" rel="stylesheet">
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
        <link type="text/css" rel="stylesheet" href="style.css">
        <title>Lewis Donley</title>
    </head>
    <body>
    <div class="container">
        <nav class="nav-bar" id="nav-bar">
            <h2 class="nav-bar__logo">Logo</h2>
            <ul class="nav-bar__ul">
            <li class="nav-bar__ul__nav-link" id="about-link">About</li>
            <li class="nav-bar__ul__nav-link" id="portfolio-link">Portfolio</li>
            <li class="nav-bar__ul__nav-link" id="personal-link">Personal</li>
            <li class="nav-bar__ul__nav-link" id="contact-link">Contact</li>
        </ul></nav>
        <section class="child landing-section">
            <h1 class="landing-section__header" id="changeText">Hello!</h1>
            <a class="scroll-icon" href="#"></a>
        </section>
        <section class="child about-section" id="aboutSection">
            <div class="banner"></div>
            <h1 class="landing-section__header" id="changeText">About</h1></section>


        <section class="child portfolio-section" id="portfolioSection"><div class="banner"></div>
             <h1 class="landing-section__header" id="changeText">Portfolio</h1></section>
        <section class="child personal-section" id="personalSection">
            <div class="banner"></div>
             <h1 class="landing-section__header" id="changeText">Personal</h1></section>
        <section class="child contact-section" id="contactSection">
            <div class="banner"></div>
             <h1 class="landing-section__header" id="changeText">Contact</h1></section>
    </div>
        <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
        <script src="/node_modules/waypoints/lib/noframework.waypoints.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...