[英]HTML static bar on top covers the link to the section
I have a static horizontal bar on the top of the website, this height of the bar is 100px.我在网站顶部有一个静态水平栏,该栏的高度为 100px。 In the body of the html I have something like:
在 html 的正文中,我有类似的内容:
<a name="photo-section"></a>
So I can recall that section from my website www.domain.com/#photo-section The problem is that the bar covers part (100px) of the photo section because it is static;所以我可以从我的网站 www.domain.com/#photo-section 中回忆起那个部分 问题是栏覆盖了照片部分的一部分(100px),因为它是静态的; is there some solution to this?
有什么解决办法吗? I added a white div on the top but it looks very bad on the actual website.
我在顶部添加了一个白色 div,但在实际网站上看起来很糟糕。
You can see the problem when you click on the nav link "photo" in here当您单击此处的导航链接“照片”时,您可以看到问题
Thanks谢谢
Solution 1: You can try this by adding a little CSS:解决方案 1:您可以通过添加一些 CSS 来尝试:
<a href="#photo-section">Jump to Photo Section</a>
[....]
<a name="photo-section" style="display: block; padding-top: 100px;">Photo Section</a>
Solution 2: Or using jQuery or whatever javascript-like:解决方案 2:或者使用 jQuery 或任何类似 javascript 的:
<a name="photo-section" id="photo-section">Photo Section</a>
and then trigger the animations by然后触发动画
<script>
function scrollBonus(id) {
$('html, body').animate({scrollTop: ($(id).scrollTop() + 100) + 'px'}, 300);
}
</script>
And if you want to trigger it even if the visitors click your link from another page:如果您想触发它,即使访问者从另一个页面单击您的链接:
<script>
$(document).ready(function() {
scrollBonus(window.location.hash);
});
</script>
Hope this helps.希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.