Question

在我的网页上我有一个固定的导航栏，在它下面我有一些其他的div - 导航栏链接连接到这些链接。问题是，当我点击一些链接时，固定的导航栏覆盖了div的开头。我想要和想要做的是导航栏将在div的开头，所以它不会覆盖开始。这是结果的link。

这是我的HTML代码：

<body>
<div id="header">
    <div id="nav_bar">
        <ul>
            <li><a href="#">בית</a></li>
            <li><a href="#about_us">מי אנחנו</a></li>
            <li><a href="#our_services">מוצרים</a></li>
            <li><a href="#connect_us">צרו קשר</a></li>
            <li><img src="1.png"></img></li>

        </ul>
    </div>
</div>

<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">

</div>
<div id="main_photo2" class="phocont">

</div>
<div id="main_photo3" class="phocont">
</div>
<div id="main_photo4" class="phocont">
</div>
<div id="main_photo5" class="phocont">
</div>
</div>  
<div id="about_us" class="container">
<h1>עץ כנעני - כשעיצוב ואיכות נפגשים</h1>
<p> וייצור המוצר.</p>
<p>א.</p>


</div>

<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
</div>

<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
</div>  

<div id="down_nav_bar" class="container">
</div>

<div id="credit" class="container">
</div>

</body>

这是我的css代码：

body{
background-color: white;
margin: 0px;
padding: 0px;
}
#nav_bar{
background: rgba(255,255,255,0.9);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
z-index: 2;

}

#nav_bar ul{
padding: 0px;
text-align: center;
direction: rtl;
}

#nav_bar ul li {
display: inline-block;
padding: 0 10px;    
color: gray;
float: inherit;
font-family: "alefregular";
font-size: 23px;
}

#nav_bar ul li a{
color: inherit;
text-decoration: none;
}

#nav_bar ul li a:hover{
color:#a51212;
}

#nav_bar img{

height:18px;
position:absolute;
padding-right:20px;
top:25px;
z-index:-1px;
}
#about_us{
text-align: center;
/*height: 250px;*/
height: 100%;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New     Roman";
color:gray;
}

#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;

}

#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New   Roman";
color: black;
background-color: rgb(224,224,224);
}

Answer 1

尝试将填充顶部添加到容器

.container
{
padding-top: 55px;
}

fiddle

如果您不希望文字向下移动，那么＆＃39; x＆＃39;像素，您可以使用jQuery以编程方式使用调整后的偏移滚动：

$('html, body').animate({
    scrollTop: $(target).offset().top - 55
    }, 1000);

注意，此示例不使用padding-top：

fiddle

或者，没有jQuery：

window.scrollTo(0, document.getElementById(targetSection).offsetTop-55);

fiddle

Answer 2

到目前为止最简单的方法是将一些填充（尽管导航栏很高）添加到作为链接目标的div：

div.container{ padding-top: 55px; }

为了语义，我建议您使用section元素而不是那些无意义的div等等...... https://html.spec.whatwg.org/multipage/semantics.html#sections

滚动到固定导航栏链接ID

2 个答案: