在主页我有服务与readmore按钮列出,当用户点击readmroe按钮我想发送到各自的服务页面部分具有特定的id.
但由于粘性导航条的高度为50 px的滚动在重叠的内容在服务页面
主页:
<header>
<nav id="navbar" class="sticky">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="top-top">
<ul class="temp-op">
<li><a href="services.html#ser-1" >Service-1</a></li>
<li><a href="services.html#ser-2" >Service-2</a></li>
<li><a href="services.html#ser-3" >Service-3</a></li>
<li><a href="services.html#ser-4" >Service-4</a></li>
<li><a href="services.html#ser-5" >Service-5</a></li>
</ul>
</div>
字符串
x1c 0d1x的数据
因此,当用户单击services-1、services-2等时,它应该重定向到services page id section services page:
<header>
<nav id="navbar" class="sticky">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section id="ser-1" class="service">
<h2>Service-1</h2>
<p>Description of Service-1 goes here.</p>
</section>
<section id="ser-2" class="service">
<h2>Service-2</h2>
<p>Description of Service-2 goes here.</p>
</section>
<section id="ser-3" class="service">
<h2>Service-3</h2>
<p>Description of Service-3 goes here.</p>
</section>
<section id="ser-4" class="service">
<h2>Service-4</h2>
<p>Description of Service-4 goes here.</p>
</section>
<section id="ser-5" class="service">
<h2>Service-5</h2>
<p>Description of Service-5 goes here.</p>
</section>
型
的
正如我们所看到的,当我们点击主页的readmore按钮时,由于服务页面的粘性标题内容隐藏,重定向到服务页面id部分,我们如何修复此重定向问题重叠内容
我已经尝试了css偏移,但没有工作
.destination {
scroll-margin: 100px 0 0 0;
}
型
1条答案
按热度按时间wkyowqbh1#
默认的CSS选项是使用节顶部填充或第二个选项是使用偏移顶部使用jQuery
个字符