Javascript 有没有办法让我不'；我不必在我的onepager上微调边距和填充？

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

我用边距和填充物修复了它，但我觉得有一个更好更简单的解决方案。

我试了几个小时，但并没有找到完美的解决方案，总是有一些问题，不起作用

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

    });

  });

});



//

OptikTack







第五节

我添加了

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

并将每个部分的

顶部：

更改为-80px（因为我的导航栏高度为80px）

---

这使它变得更简单了

您可以向所有这些锚点添加一个类，该类向锚点添加一个具有以下设置的伪元素：

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

必须根据固定标题的高度调整

80px

和

-80px

值，但这将创建与标题一样高的伪元素，然后位于标题后面，并在标题下对齐其相应的“主”元素

在看到您的小提琴后添加/编辑（在评论后再编辑一次）：

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

因此，我在Javascript中只更改了一点（在HTML代码的底部）：我在

animate

函数中添加了“-80”，它在脚本动画滚动的位置上添加（或者说减去）80px的偏移量。（唯一例外：如果链接锚点是

#home

，则没有偏移，因为在这种情况下，页面必须一直向上滚动，这就是if/else的作用）：

$（'a'）。单击（函数（）{
var scrollziel=$（this.attr（'href'）；
if（scrollziel='#home'）{
$（'html，body'）。设置动画({
滚动顶部：0
}, 500);
返回false；
}否则{
$（'html，body'）。设置动画({
scrollTop:$（$（this.attr（'href'））.offset（）.top-80
}, 500);
返回false；
}
});

---

这似乎解决了问题，看看我对你小提琴的看法，只有一点不同：

旁注：使用一个简单的/最低限度的框架进行基本设置我补充说，但现在我的部分之间存在差距，而且它在Terminvereinbarung``中不起作用，`您的主要元素中仍然有

top:-80px

和

padding top:80px

（应该删除）但是我用/**/把它们变灰了，我想当我把它们变灰时它会忽略它们的。啊，对不起，我以前没有注意到。但是你这样注释掉了这些元素的整个CSS规则-这可能会破坏你的布局（？）你应该只注释掉

top:-80px

和

padding top:80px

来测试这个。请注意：我再次更改了问题中的代码，并添加了另一个提琴。

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

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

<!-- 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 -->