修复了页面标题与页面上的锚点重叠的问题

Question

当我单击任何锚链接时，我的标题与该部分的实际内容重叠。是否可以将其移动到该部分的顶部？我已经在寻找一些解决方案，但它们并不适合我。

我尝试向这些部分添加一个锚类，并且还尝试了scroll-margin-top，但效果不佳。

//header Effekt beim scrollen

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

        }

        

    });

    

});

    

});

//

Answer 1

请在您的 css 代码中尝试一下：我刚刚将 top:0 添加到您的导航栏代码中，并将 margin-top 添加到 html 中的下一个元素，即该部分。我认为 spacer div 没有必要。#navbar {&nbsp; border-bottom-style: solid;&nbsp; border-bottom-width: 1.25px;&nbsp; box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);&nbsp; background-color: white;&nbsp; height: 128px;&nbsp; transition: 0.32s;&nbsp; position: fixed;&nbsp; top:0;&nbsp; width: 1280px;}body {margin-top: 128px;}