滚动到带有固定标题的锚点,内容隐藏在标题后面,边距和顶部填充不起作用

发布于 2024-10-15 09:32:54 字数 200 浏览 7 评论 0原文

我正在使用 smoothscroll.js 来导航我的网站。在 Firefox 中,它会停在正确的锚点上,但在 Chrome 中,它会在第一次单击链接时传递该点,并将内容推送到顶部,将内容隐藏在页面后面。然后,如果您再次单击它,它就会正确对齐。我也在其他网站上看到过这些问题。很想看看其他人是否也有同样的问题。 Chrome 似乎忽略任何顶部填充或边距或定位(例如:top:20%;)。

I'm using smoothscroll.js to navigate my site. It stops on the correct anchor in Firefox, however in Chrome it passes the point on the first click of the link, and pushes the content to the top, hiding the content behind the page. then if you click it again, it aligns correctly. I've seen the problems on other sites as well. Curious to see if others have the same problem. Chrome seems to ignore any top padding or margin or positioning (example: top:20%;).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

謸气贵蔟 2024-10-22 09:32:54

我发现这个解决方案非常简单且有用。您只需要添加 1 行 CSS 即可。

html {
    scroll-padding-top: 70px; /* height of sticky header, because the header hides the content when jumping to it */
}

原始答案:https://stackoverflow.com/a/56467997

I find this solution very easy and useful. You just need to add 1 line of CSS.

html {
    scroll-padding-top: 70px; /* height of sticky header, because the header hides the content when jumping to it */
}

original answer: https://stackoverflow.com/a/56467997

一直在等你来 2024-10-22 09:32:54

我使用 本地滚动 (JQuery) 来执行此操作。

它允许您进行顶部偏移

$.localScroll({
    offset: -100
});

I used Local Scroll (JQuery) to do this.

It allows you to do a top offset

$.localScroll({
    offset: -100
});
囚我心虐我身 2024-10-22 09:32:54

这可能是由于新的 WordPress 主题使用了 header html5 元素。我将标题更改为 div,效果很好。

This may be due to a new wordpress theme using the header html5 element. I changed my header to a div, and it worked fine.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文