Как установить Smooth Scroll в Sticky Navbar? - PullRequest
Новая
       32

Как установить Smooth Scroll в Sticky Navbar?

1 голос
/ 15 марта 2020

У меня есть липкое меню, есть дети. как этот шаблон: 

<ul id="sticky">
 <li><a href="#one">One</a></li>
 <li><a href="#two">Two</a></li>
 <li><a href="#three">Three</a></li>
</ul>

и теги div на странице: 

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

, поэтому я хочу нажать на элемент и прокрутить до элемента div, но проблема с липкой навигацией.

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

как я могу установить смещение (поведение при прокрутке: плавное) или как-нибудь исправить эту проблему?

1 Ответ

0 голосов
/ 15 марта 2020

У меня раньше была эта проблема с моим веб-сайтом, но я не боюсь, что javascript может решить эту проблему, попробуйте добавить ее в файл js сценария или javascript в файле html

* 1002. * 
$(".smooth-scroll").click(function(e) {
        let currentItem = e.target.text;
        console.log(currentItem);
        $("html, body").animate(
          {
            scrollTop:
              $($(this).attr("href")).offset().top -
              (currentItem == "Skills" ? 100 : 100)
          },
          "fast"
        );
        return false;
      });
<ul id="sticky">
 <li><a class="smooth-scroll" href="#one">One</a></li>
 <li><a class="smooth-scroll" href="#two">Two</a></li>
 <li><a class="smooth-scroll" href="#three">Three</a></li>
</ul>


<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
...