My Sticky Header 具有平滑滚动效果的封面内容

Question

我添加了粘性 header 和平滑的滚动效果，但我不知道如何固定位置，所以它与 header 大小一起计算。我试过的东西完全禁用了粘性 header。

我尝试了几种不同的技术，虽然我是新手，而且我自己可能太难了。

<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");
  }
}

这是我尝试过的一件事，但它禁用了我的粘性 header:

$(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();
  });
});

我想我可以为总 header 大小设置一个值并以这种方式定位它，尽管它会禁用粘性 header。我该如何正确执行此操作？

这是我的网页： http://www.student.city.ac.uk/~aczc972

此致，丹妮尔

Answer 1

这不一定是执行此操作的最佳方法，但它是一个旨在说明如何完成此操作的示例。您 不需要 jQuery 来实现此效果，因此值得一试。

下面的代码修复了 header，并调整了主包装器的填充以适应 header 的大小。然后它在带有 class section-link 的元素上设置监听器。对于这些元素，单击事件将滚动到具有对应于被单击元素的 data-section 属性的 id 的元素。

您可以忽略此 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>

Answer 2

我已经添加了一个沙箱如何使用 jQuery，一般来说，我的网站只有一个补充是我正在检查目标是什么，例如滚动到首页，如果是，我是运行指定代码：

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

codesandbox.io/s/81l87w26w0

减去 header 高度滚动以防止 header

覆盖内容

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

Answer 3

您还可以滚动到页面顶部，例如：

将 id="home" 添加到正文并更改 href in:

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

到home即

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

应该可以使用您的代码

My Sticky Header 具有平滑滚动效果的封面内容

My Sticky Header Cover Content with the Smooth Scrolling Effect

javascript

header

sticky

scroll-position