Navbar дрожит, когда я прокручиваю вниз, используя функцию анимации - PullRequest
Новая
       31

Navbar дрожит, когда я прокручиваю вниз, используя функцию анимации

1 голос
/ 23 апреля 2020

Я сталкиваюсь со странной проблемой, когда прокручиваю вниз, звякнув по ссылке <a> в панели навигации, эта дрожит или мигает. Вот моя разметка: 

(function($) {

    // Smooth scroll to the anchor
    $("nav a").on("click", function(event) {

        var $this = $(this),
            id = $this.attr("href"),
            $section = $(id);

            event.preventDefault();
            $("html, body").stop().animate({
                scrollTop: $section.offset().top
            }, 1500, 'easeInOutExpo');

          $("html, body").on("scroll wheel DOMMouseScroll mousewheel keyup touchmove", function(){
            $("html, body").stop()});
    });

})(jQuery);
html, body {
    margin: 0;
}

nav {
    position: fixed;
    text-align: right;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    font-family: Arial, Helvetica, sans-serif;
}

#section1, #section2, #section3, #section4 {
    height: 500vh;
}
<div class="jarallax" data-jarallax data-speed="0.03">
    <img class="jarallax-img" src="bg.jpeg" alt="">
    <nav>
        <ul>
            <li><a href="#section1">section1</a></li>
            <li><a href="#section2">section2</a></li>
            <li><a href="#section3">section3</a></li>
            <li><a href="#section4">section4</a></li>
        </ul>
    </nav>
    <div id="section1">
        test
    </div>
    <div id="section2"></div>
    <div id="section3"></div>
    <div id="section4"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"   integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="   crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>
<script src="https://unpkg.com/jarallax@1/dist/jarallax.min.js"></script>
<script src="main.js"></script>

Вот что я наблюдал:

  • Когда я нажимаю на ссылку навигационной панели, скрипт запускается и страница плавно однако прокручивается вниз, но навигационная панель дрожит вверх и вниз и мигает
  • Ошибка появляется только один раз, тогда мне нужно обновить sh страницу, чтобы снова ее увидеть
  • Эта ошибка работает только в Safari (я используйте версию 13.1)
  • Если я удаляю test в section1 - он работает большую часть времени, а иногда немного мигает
  • Такое же поведение, если я удаляю строку семейства шрифтов в css только мигает
  • Если я удаляю transform: translate (-50%, -50%) в css, он отлично работает
  • Если я удаляю Jarallax, он тоже работает (однако Я хотел бы сохранить его)

Библиотека Jarallax: https://github.com/nk-o/jarallax

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

Заранее благодарю за помощь!

...