blocks|key|639806|text|一种常见的方法是通过CSS向链接的原始目标元素添加不可见的伪元素，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|639807|#work::before+{+
++display:+block;+
++content:+"+";+
++margin-top:+-60px;+
++height:+60px;+
++visibility:+hidden;+
++pointer-events:+none;
}|code-block|syntax|javascript|639808|这将“扩展”带有该ID的元素，使锚点位于主元素之上的60+be+(可以是任何值)，而不会导致任何其他可见的更改。|639809|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

One common way is to add invisible pseudo elements to the original target elements of the links via CSS, like this:

<pre><code>#work::before { 
 display: block; 
 content: " "; 
 margin-top: -60px; 
 height: 60px; 
 visibility: hidden; 
 pointer-events: none;
}
</code></pre>

This will "extend" the element with that ID in a way which causes the anchor to be 60px above the main element (can be any value), without causing any other visible changes.

blocks|key|639857|text|您可以使用边距顶和填充顶的这一点，而不影响到网站的正面。尝试将-50+to添加到边距顶部，将50+to添加到填充顶。这会解决你的问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|639858|​|639859|📷|atomic|639860|639861|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/23ef71ecad9589ebc4b77e9050f257c0.png|imageAlt^0|V|Q|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|K|3|G|5|6|7|12|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S|T|-4]]]]

You can use margin-top and padding-top for this with out affecting to the front side of the website. Try to add -50px to margin top and 50px to padding top. This will fix your issue.

<a href="https://i.stack.imgur.com/noYSC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/noYSC.png" alt="See the attachment"></a>

blocks|key|4093406|text|将margin-top:+-50px;padding-top:+50px;添加到它工作的目标id|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4093407|#work,#about,#contact,#copyright{
++++margin-top:+-50px;
++++padding-top:+50px;
}|code-block|syntax|javascript|4093408|entityMap^0|1|10|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

add <code>margin-top: -50px;padding-top: 50px;</code> to target id it works

<pre><code>#work,#about,#contact,#copyright{
 margin-top: -50px;
 padding-top: 50px;
}
</code></pre>

On my site <a href="http://richardclifford.net/" rel="nofollow noreferrer">http://richardclifford.net/</a>, whenever a user clicks the one-page <code>#id</code> elements it goes to the very first piece of content the and ignored all the container padding and h2 margin-top to look like this

<a href="https://i.stack.imgur.com/FAUKS.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FAUKS.jpg" alt="BEFORE"></a>

I'd want it to scroll to include the padding or have an offset like this. 

<a href="https://i.stack.imgur.com/LM0Ej.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LM0Ej.jpg" alt="enter image description here"></a>

I've add an offset on my scrollspy but that is not fixing it and not sure how I can fix this.

Fixed-top Nav Is too low

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在我的站点上，每当用户单击单页#id元素时，它就会转到第一部分内容，而忽略了所有容器填充和h2边距顶部，如下所示​​我希望它滚动包括填充或有这样的偏移。​​我在滚动间谍上添加了一个偏移量，但这并不是修复它，也不确定如何修复它。

问固定顶的Nav太低了
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问固定顶的Nav太低了EN