如何使用媒體查詢使導航欄進入固定或粘性位置？當您向下滾動頁面的滾動條時，我想讓它可見。我嘗試了我能做的任何事情，但我真的不明白。
這是我的代碼示例。
.navbar {
background-color: #111;
padding: 12px 16px;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
/* MEDIA QUERY */
這里
@media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="" class="">Home</a></li>
<li><a href="" class="">About Me</a></li>
<li><a href="" class="">My Skills</a></li>
<li><a href="" class="">Services</a></li>
<li><a href="" class="">Certificates</a></li>
</ul>
</div>
</body>
</html>
uj5u.com熱心網友回復：
您可以使用 CSS 位置屬性使導航欄保持粘性或固定。將位置屬性設定為“粘性”或“固定”。
請參閱下面的片段。您可以根據需要將其添加到任何視口，我已將其添加到更大的螢屏。
body {
height: 800px;
background: cyan;
}
.navbar {
background-color: #111;
padding: 12px 16px;
position: sticky;
top: 0;
}
.navbar ul {
list-style-type: none;
text-align: center;
display: flex;
}
.navbar li a{
color: #ccc;
text-decoration: none;
padding: 8px 16px;
margin-left: 20px;
}
@media screen and (max-width: 700px) {
.navbar ul{
flex-direction: column;
padding: 20px;
}
.navbar ul a{
margin: 5px 0px;
width: 30%;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navbar">
<ul>
<li><a href="" class="">Home</a></li>
<li><a href="" class="">About Me</a></li>
<li><a href="" class="">My Skills</a></li>
<li><a href="" class="">Services</a></li>
<li><a href="" class="">Certificates</a></li>
</ul>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/517107.html
標籤：htmlcss媒体查询
上一篇：如何將點移到中心
下一篇：如何將我的內容放置在側邊欄旁邊？