Содержимое обложки My Sticky Header с эффектом плавной прокрутки

Question

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

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

<div id="container">
  <section id="sectionHome">
    <!--Header and Logo-->
    <header id="myHeader">
      <logo>
        <img src="Pictures/Marvel-logo-880x660.crop.png">
      </logo>
    </header>

    <!--The Top Navigation Menu-->
    <div id="mainNav">
      <ul>
        <li class="current"><a href="#">Home</a></li>
        <li><a href="#firstArticle">Characters</a></li>
        <li><a href="#secondArticle">Movies</a></li>
        <li><a href="#thirdArticle">More Info</a></li>
      </ul>
    </div>
  </section>

//Smooth Scrolling in Main Nav
$(document).ready(function() {
  $('#mainNav li a').click(function(e) {

    var targetHref = $(this).attr('href');

    $('html, body').animate({
      scrollTop: $(targetHref).offset().top
    }, 1000);

    e.preventDefault();
  });
});


// Sticky Header
window.onscroll = function() {
  myFunction()
}; // When the user scrolls the page
var header = document.getElementById("sectionHome"); // Get the header and top nav
var sticky = header.offsetTop; // Get the offset position of the navbar
function myFunction() { // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

Это была одна вещь, которую япопробовал, но он отключил мой липкий заголовок:

$(document).ready(function() {

  var headerHeight = $('header').outerHeight(); // Target your header navigation here

  $('#main-nav li a').click(function(e) {

    var targetHref   = $(this).attr('href');

    $('html, body').animate({
        scrollTop: $(targetHref).offset().top - headerHeight // Add it to the calculation here
    }, 1000);

    e.preventDefault();
  });
});

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

Это моя веб-страница: http://www.student.city.ac.uk/~aczc972

С уважением, Даниэль

Answer 1

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

if (targetHref === "#") {
  $("html, body").animate(
    { scrollTop: 0 },
    "1000"
  );
} else {
  $("html, body").animate({scrollTop: $(targetHref).offset().top},1000);
}

codesandbox.io / s / 81l87w26w0

Вычтите прокрутку высоты заголовка, чтобы предотвратить покрытие содержимого заголовком

scrollTop: $(targetHref).offset().top - 180"

Answer 2

Вы также можете прокрутить вверх страницы, например:

Добавить id="home" к телу и изменить href в:

<li class="current"><a href="#">Home</a></li>

на homeт.е.

<li class="current"><a href="#home">Home</a></li>

Должен работать с вашим кодом

Answer 3

Это не обязательно лучший способ сделать это, но это пример, который разработан, чтобы проиллюстрировать, как это можно сделать. Вам не нужно нужно jQuery для достижения этого эффекта, поэтому стоит попробовать его без.

Приведенный ниже код исправляет заголовок и корректирует заполнение главной оболочки с учетом размера заголовка. Затем он настраивает слушателей на элементы с классом section-link. Для этих элементов событие click прокручивается до элемента с идентификатором, который соответствует атрибуту data-section для элемента, по которому был выполнен щелчок.

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

const padForHeader = () => {
  // find out how high the header element is
  const headerHeight = document.getElementById('top-header').clientHeight;

  // how much extra padding would we like?
  const headerPadding = 20;

  // add the two together to see how much padding we need to add
  const headerBufferSize = headerHeight + headerPadding;

  // set the marginTop property so that the header doesn't overlay content
  document.querySelector('.wrapper').style.marginTop = `${headerBufferSize}px`;
};

padForHeader();

// when the window resizes, re-pad for the header
window.addEventListener('resize', padForHeader);

document
  .querySelectorAll('.section-link')
  .forEach(element => {

    // we want to scroll 'smoothly' to the element
    const scrollOptions = {
      behavior: "smooth"
    };

    // we can read the data attribute to find the matching element's id
    const elementIdToScrollTo = element.dataset.section;

    // we can use the id we found to get the corresponding element
    const elementToScrollTo = document.getElementById(elementIdToScrollTo);

    // we can set the onclick property to scroll to the element we found
    element.onclick = () => elementToScrollTo.scrollIntoView(scrollOptions);
  });

.header {
  background-color: red;
  border: solid 2px grey;
  border-radius: 5px;
  font-family: arial;
  margin: 0 auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 97%;
}

.header>ul {
  list-style: none;
  color: rgba(250, 250, 240, 0.8);
}

.header>ul>li {
  cursor: pointer;
  display: inline-block;
  position: relative;
  top: 0px;
  transition: all 0.3s ease;
  width: 200px;
}

.header>ul>li:hover {
  color: rgba(250, 250, 240, 1);
  top: -1px;
}

.section {
  background-color: rgba(20, 20, 30, 0.2);
  height: 80vh;
  border-bottom: solid 2px black;
  padding-top: 50px;
}

<div class="wrapper">
  <div id="top-header" class="header sticky">
    <ul>
      <li class="section-link" data-section="1">Item 1</li>
      <li class="section-link" data-section="2">Item 2</li>
      <li class="section-link" data-section="hello-world">Item hello world</li>
    </ul>
  </div>

  <div id="1" class="section">
    Test 1
  </div>
  <div id="2" class="section">
    Test 2
  </div>
  <div id="hello-world" class="section">
    Test 3
  </div>
</div>