有没有一种方法可以让我不必在我的单页机上微调我的边距和填充？

Question

我遇到了一个问题，按钮没有将我滚动到锚点的顶部，而是滚动到该部分太远（那是因为我的导航栏是固定的并且与该部分重叠）。

我用边距和填充修复了它，但我觉得有更好、更简单的解决方案。 https://jsfiddle.net/HcJanni/2n9b0ohp/76/

我试验了几个小时，但没能真正找到完美的解决方案，总是有问题，无法正常工作。

$(function() {
  var shrinkHeader = 100;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
    if (scroll >= shrinkHeader) {
      $('#navbar').addClass('shrink');
    } else {
      $('#navbar').removeClass('shrink');
    }
  });

  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
});
// JavaScript Document

$(document).ready(function() {

  var navTop = $('#navbar').offset().top;
  var navHeight = $('#navbar').height();
  var windowH = $(window).height();

  $('.section').height(windowH);

  $(document).scroll(function() {
    var st = $(this).scrollTop();

    //for the nav bar:
    if (st > navTop) {
      $('#navbar').addClass('fix');
      $('.section:eq(0)').css({
        'margin-top': navHeight
      }); //fix  scrolling issue due to the fix nav bar
    } else {
      $('#navbar').removeClass('fix');
      $('.section:eq(0)').css({
        'margin-top': '0'
      });
    }

    $('.section').each(function(index, element) {
      if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
        $(this).addClass('active');

        var id = $(this).attr('id');
        $('a[href="#' + id + '"]').parent('li').addClass('active');
        // or $('#nav li:eq('+index+')').addClass('active');
      } else {
        $(this).removeClass('active');

        var id = $(this).attr('id');
        $('a[href="#' + id + '"]').parent('li').removeClass('active');
        //or $('#nav li:eq('+index+')').removeClass('active');
      }

    });

  });

});



//

/* MAIN */

/* SECTION HOME */
#home {
  height: 853px !important;
  display: flex;
  z-index: -1;
  position: relative;
  top: -128px;
  padding-top: 128px;
}

#homebild {
  width: 1280px;
  height: 853px;
}

/* SECTION WIR-UEBER-UNS */
#wir-ueber-uns {
  height: 853px !important;
  display: flex;
  top: -208px;
  padding-top: 80px;
  z-index: -2;
  position: relative;
  background-color: lightblue;
}

#wir-ueber-unsbild {
  width: 1280px;
  height: 853px;
}

/* SECTION AKTIONEN */
#aktionen {
  height: 853px !important;
  display: flex;
  padding-top: 80px;
  top: -288px;
  z-index: -3;
  position: relative;
  background-color: darkblue;
}

#aktionenbild {
  width: 1280px;
  height: 853px;
}

/* SECTION TERMINVEREINBARUNG */
#terminvereinbarung {
  height: 853px !important;
  padding-top: 80px;
  top: -368px;
  display: flex;
  z-index: -4;
  position: relative;
  background-color: red;
}

#terminvereinbarungbild {
  width: 1280px;
  height: 853px;
}

/* SECTION INFOS */
#infos {
  height: 772px !important;
  width: 1280px;
  display: flex;
  padding-top: 80px;
  top: -448px;
  z-index: -5;
  position: relative;
  background-color: darkblue;
}

/* MAIN ENDE */

<!DOCTYPE html>
<html>

  <head>
    <title>OptikTack</title>
    <link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  </head>

  <body>
    <div id="container">
      <div class="body">
        <!-- NAVIGATION -->
        <nav id="navbar">
          <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
          <script src="javascript/navbar fixed.js"></script>
          <a href="#home" id="logo"><img src="https://i.postimg.cc/przxCGcx/Logo.png" class="logo"></a>
          <ul>
            <li class="hvr-sweep-to-top active"><a href="#home">Home</a></li>
            <li class="hvr-sweep-to-top"><a href="#wir-ueber-uns">Wir über uns</a></li>
            <li class="hvr-sweep-to-top"><a href="#aktionen">Aktionen</a></li>
            <li class="hvr-sweep-to-top"><a href="#terminvereinbarung">Terminvereinbarung</a></li>
            <li class="hvr-sweep-to-top"><a href="#infos">Infos</a></li>
          </ul>
        </nav>
        <!-- NAVIGATION ENDE -->
        <!-- MAIN -->
        <div id="spacer"></div>
        <!-- home section -->
        <section id="home" class="section">
          <div>
            <img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild" width="1280px">
          </div>
        </section>
        <!-- home section ende -->
        <!-- wir-ueber-uns section -->
        <section id="wir-ueber-uns" class="section">
          <div>
            <img src="https://i.postimg.cc/FH6RSxbF/Bild-2.jpg" width="1280px" id="wir-ueber-unsbild">
          </div>
        </section>
        <!-- wir-ueber-uns section ende -->
        <!-- aktionen section -->
        <div id="reference"></div>
        <section id="aktionen" class="section">
          <div>
            <img src="https://i.postimg.cc/k5P0L6qF/Bild-5.jpg" width="1280px" id="aktionenbild">
          </div>
        </section>
        <!-- aktionen section ende -->
        <!-- terminvereinbarung section -->
        <section id="terminvereinbarung" class="section">
          <div>
            <img src="https://i.postimg.cc/6q8b8tBp/Bild-9.jpg" width="1280px" id="terminverinbarungbild">
          </div>
        </section>
        <!-- terminvereinbarung section ende -->
        <!-- infos section -->
        <section id="infos" class="section">
          <div>
            <p>section 5</p>
          </div>
        </section>
        <!-- infos section ende -->
        <!-- MAIN ENDE -->

Answer 1

我加了

  font-family: "Saira", "Roboto",  Segoe UI, Helvetica Neue, Arial, sans-serif;
  box-sizing: border-box;
}

并将每个部分的 top: 更改为 -80px（因为我的导航栏高度为 80px）

这让它变得更简单了

Answer 2

您可以向所有这些锚点添加 class，这会向具有以下设置的锚点添加 pseudo-element：

.your_anchor_class::before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}

80px 和 -80px 值必须根据固定 header 的高度进行调整，但这会创建与 [=] 一样高的伪元素40=] 然后将 落后于 然后 header，将它们相应的“主要”元素对齐在和 header 之下。

ADDITION/EDIT 看到你的 Fiddle（评论后又编辑了一次）：

我之前不知道你不会直接“跳”到锚点位置，但是有一个动画滚动脚本可以滚动到这些锚点，必须以不同的方式处理，即通过更改脚本。

所以我只在您的 Javascript 中更改了一点（在 HTML 代码的底部）：我在 animate 函数中添加了“ - 80 ”，它添加了（或者更确切地说，减去）脚本动画滚动位置的 80px 偏移量。（唯一的例外：如果 link 锚点是 #home，则没有偏移量，因为在这种情况下页面必须一直向上滚动，这就是 if/else 的作用）：

<!-- Smooth Scroll -->
<script>
  $('a').click(function() {
  var scrollziel = $(this).attr('href');
    if(scrollziel == '#home') {
      $('html, body').animate({
        scrollTop: 0
      }, 500);
      return false;
    } else {
      $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top - 80
      }, 500);
      return false;
    }
  });
</script>
<!-- Smooth Scroll Ende -->

这似乎可以解决问题，请参阅我的 fiddle 版本，只有一点点不同：https://jsfiddle.net/c1gjybtf/

有没有一种方法可以让我不必在我的单页机上微调我的边距和填充？

Is there a way where I don't have to fine tune my margins and paddings on my onepager?

html

javascript

css

anchor

jquery