Кнопка, которая прокручивает элемент с липкой панелью навигации, как? - PullRequest
Новая
       36

Кнопка, которая прокручивает элемент с липкой панелью навигации, как?

0 голосов
/ 15 января 2020

так что в основном я делаю сайт портфолио. На этом сайте я хочу использовать липкую панель навигации, которая остается на месте, когда вы прокручиваете ее. Теперь также кнопки на панели навигации при нажатии должны прокручивать меня до элемента, связанного с этой кнопкой. Дело в том, что там есть панель навигации, она каждый раз прокручивается немного слишком далеко, и я не знаю, как это исправить.

Я попробовал несколько вещей, сначала я попытался сделать это: <a href="#elementInQuestion"> Это приведет к прокрутке до нужного элемента, но слишком далеко, потому что там есть панель навигации.

Во-вторых, я попытался сделать это более javascript способом. Таким образом, html для этого будет примерно таким:

<li id="projectsBtn" onclick="scrollTime();">Projecten</li>

Тогда javascript: 

function scrollTime(){
  location.href = "#";
  location.href = "#projects";
  window.scrollBy(0, -108);
}

Теперь то, что это сделало, это отрицается первые 2 строки в функции javascript и прокручиваются только на 108 пикселей. Когда я удаляю метод scrollBy, страница прокручивается до элемента #projects, но сначала он не прокручивается до элемента, а затем прокручивается немного выше, чем я хотел, здесь.

Это должен был прокрутить до нужного элемента, а затем прокрутить вверх на дополнительные 108 пикселей (потому что вот насколько велика навигационная панель)

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

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

1 Ответ

0 голосов
/ 15 января 2020

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

<body> 
<div class="container">
 <div class="navbar">
    <div class="btn">
      <a href="#about>ABOUT</a>
    </div>
    <div class="btn">
      <a href="#price-list>PRICE</a>
    </div>
  </div>
  <section id="about">
    <h1>About</h1>
  </section>
  <section id="price-list">
    <h1>Price list</h1>
  </section>
</div>
</body>

CSS

.navbar {
    position: fixed;
    top: 0;
    z-index: 1;
    display: flex;
    width: 100%;
    height: 70px;
    background: rgba(0,0,0,0.9);
}


.container {
    height: 100%;
    width: 100% !important;

/* CSS Scroll stuff */

    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}
body{
    height:100vh;
    overflow: hidden;
}
...