當我單擊任何錨鏈接時,我的標題與該部分的實際內容重疊。是否可以將其移動到該部分的頂部?我已經在尋找一些解決方案,但它們并不適合我。我嘗試向這些部分添加一個錨類,并且還嘗試了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'); } }); }); });//
修復了頁面標題與頁面上的錨點重疊的問題
藍山帝景
2023-07-06 17:45:33