我有html和css脚本，我想在其中创建顶部导航栏，但是当我向下滚动时，导航栏的宽度不同，我尝试更改css中的某些设置，但这无济于事
此外，当我滚动时，原本应该下拉的“新闻”菜单按钮无法下拉，我该如何解决？
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*My Style*/
.container {
width: 80%;
margin: auto;
background-color: white;
}
body {
font: 16px/28px arial, sans-serif;
background-color: gray;
color: #333;
}
.header {
padding: 20px;
}
.header .judul {
font-size: 40px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
#navigator {
font: 18px/32px Times, serif;
overflow: hidden;
background-color: #333;
}
#navigator a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 6px 20px;
text-decoration: none;
font-size: 17px;
}
#navigator a:hover {
background-color: #ddd;
color: black;
}
#navigator a.active {
background-color: #4CAF50;
color: white;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
margin-top: 43px;
display: none;
position: absolute;
background-color: #333;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 5px 17px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="icon" href="assets/img/itenas_logo.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="assets/css/style3.css">
<title>STICKY TOP NAVBAR</title>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul">STICKY TOP NAVBAR</h1>
<div id="navigator">
<a class="active" href="#">Home</a>
<div class="dropdown">
<a class="dropa" href="#">News</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ad, ex voluptatum iste illum perferendis velit nam numquam vero soluta, expedita minus ullam magnam veritatis exercitationem labore! Hic, unde? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati blanditiis veritatis rem ipsa voluptas consectetur sint perspiciatis ex? Vel dolor corrupti repudiandae dicta ratione laborum voluptas cum consequuntur repellendus! Eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minus excepturi accusamus doloremque architecto nisi nobis quasi libero dolore. Est impedit nihil ea voluptatibus omnis at magni facilis dolorem quam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto repellendus obcaecati blanditiis veritatis voluptate commodi a qui corporis sed voluptatibus vel at illo, optio ratione placeat, magni quam nam fugiat? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ipsa in ex voluptatem! Tenetur, ducimus alias eaque iusto distinctio nostrum vero, dicta, earum fugit impedit nihil tempora non beatae! Incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus omnis dolores, obcaecati eveniet, natus enim eaque sint asperiores saepe aperiam delectus? Ipsa dolor illum pariatur sapiente consequatur possimus esse?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis corporis alias temporibus? Ipsa tempora, perspiciatis provident nesciunt nam hic non voluptatum optio laborum veritatis sint consequuntur similique fugit alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique magnam eum unde sapiente veniam error beatae optio explicabo, vel obcaecati, dolorem saepe cumque adipisci reiciendis minus inventore enim modi animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit modi facere omnis non? In magni provident nulla vero ipsa debitis voluptate asperiores autem vitae. In laboriosam fuga modi sit non.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quo, tenetur at quam nostrum mollitia magnam vel iure, eius omnis aspernatur alias quae necessitatibus. Modi eveniet amet excepturi accusamus obcaecati! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, iure. Dolorum deserunt fugit officia aliquam, eveniet voluptatibus ab maxime et, accusantium nihil cumque temporibus reiciendis. Eveniet nam vitae adipisci et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus soluta veritatis laudantium ipsum rem. Beatae quisquam a cumque at nobis exercitationem. Necessitatibus enim ducimus explicabo, nisi qui aspernatur fugiat libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex, odit earum, tempore ducimus architecto recusandae laudantium distinctio labore aliquid ipsum atque quidem ab modi dolores adipisci est itaque magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid optio necessitatibus quisquam tenetur laudantium velit, porro illum eum quia molestias ratione earum, eos autem nostrum cumque unde hic adipisci. Placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ad, ex voluptatum iste illum perferendis velit nam numquam vero soluta, expedita minus ullam magnam veritatis exercitationem labore! Hic, unde? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati blanditiis veritatis rem ipsa voluptas consectetur sint perspiciatis ex? Vel dolor corrupti repudiandae dicta ratione laborum voluptas cum consequuntur repellendus! Eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minus excepturi accusamus doloremque architecto nisi nobis quasi libero dolore. Est impedit nihil ea voluptatibus omnis at magni facilis dolorem quam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto repellendus obcaecati blanditiis veritatis voluptate commodi a qui corporis sed voluptatibus vel at illo, optio ratione placeat, magni quam nam fugiat? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ipsa in ex voluptatem! Tenetur, ducimus alias eaque iusto distinctio nostrum vero, dicta, earum fugit impedit nihil tempora non beatae! Incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus omnis dolores, obcaecati eveniet, natus enim eaque sint asperiores saepe aperiam delectus? Ipsa dolor illum pariatur sapiente consequatur possimus esse?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis corporis alias temporibus? Ipsa tempora, perspiciatis provident nesciunt nam hic non voluptatum optio laborum veritatis sint consequuntur similique fugit alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique magnam eum unde sapiente veniam error beatae optio explicabo, vel obcaecati, dolorem saepe cumque adipisci reiciendis minus inventore enim modi animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit modi facere omnis non? In magni provident nulla vero ipsa debitis voluptate asperiores autem vitae. In laboriosam fuga modi sit non.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quo, tenetur at quam nostrum mollitia magnam vel iure, eius omnis aspernatur alias quae necessitatibus. Modi eveniet amet excepturi accusamus obcaecati! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, iure. Dolorum deserunt fugit officia aliquam, eveniet voluptatibus ab maxime et, accusantium nihil cumque temporibus reiciendis. Eveniet nam vitae adipisci et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus soluta veritatis laudantium ipsum rem. Beatae quisquam a cumque at nobis exercitationem. Necessitatibus enim ducimus explicabo, nisi qui aspernatur fugiat libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex, odit earum, tempore ducimus architecto recusandae laudantium distinctio labore aliquid ipsum atque quidem ab modi dolores adipisci est itaque magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid optio necessitatibus quisquam tenetur laudantium velit, porro illum eum quia molestias ratione earum, eos autem nostrum cumque unde hic adipisci. Placeat?</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navigator");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
答案 0 :(得分：0)
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*My Style*/
.container {
width: 80%;
margin: auto;
background-color: white;
}
body {
font: 16px/28px arial, sans-serif;
background-color: gray;
color: #333;
}
.header {
padding: 20px;
}
.header .judul {
font-size: 40px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
#navigator {
font: 18px/32px Times, serif;
overflow: hidden;
background-color: #333;
}
#navigator a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 6px 20px;
text-decoration: none;
font-size: 17px;
}
#navigator a:hover {
background-color: #ddd;
color: black;
}
#navigator a.active {
background-color: #4CAF50;
color: white;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
margin-top: 43px;
display: none;
position: absolute;
background-color: #333;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 5px 17px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
div#navigator {
width: 100%;
z-index: 9999;
left: 0;
}<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="icon" href="assets/img/itenas_logo.png" type="image/png" sizes="16x16">
<link rel="stylesheet" href="assets/css/style3.css">
<title>STICKY TOP NAVBAR</title>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul">STICKY TOP NAVBAR</h1>
<div id="navigator">
<a class="active" href="#">Home</a>
<div class="dropdown">
<a class="dropa" href="#">News</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ad, ex voluptatum iste illum perferendis velit nam numquam vero soluta, expedita minus ullam magnam veritatis exercitationem labore! Hic, unde? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati blanditiis veritatis rem ipsa voluptas consectetur sint perspiciatis ex? Vel dolor corrupti repudiandae dicta ratione laborum voluptas cum consequuntur repellendus! Eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minus excepturi accusamus doloremque architecto nisi nobis quasi libero dolore. Est impedit nihil ea voluptatibus omnis at magni facilis dolorem quam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto repellendus obcaecati blanditiis veritatis voluptate commodi a qui corporis sed voluptatibus vel at illo, optio ratione placeat, magni quam nam fugiat? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ipsa in ex voluptatem! Tenetur, ducimus alias eaque iusto distinctio nostrum vero, dicta, earum fugit impedit nihil tempora non beatae! Incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus omnis dolores, obcaecati eveniet, natus enim eaque sint asperiores saepe aperiam delectus? Ipsa dolor illum pariatur sapiente consequatur possimus esse?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis corporis alias temporibus? Ipsa tempora, perspiciatis provident nesciunt nam hic non voluptatum optio laborum veritatis sint consequuntur similique fugit alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique magnam eum unde sapiente veniam error beatae optio explicabo, vel obcaecati, dolorem saepe cumque adipisci reiciendis minus inventore enim modi animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit modi facere omnis non? In magni provident nulla vero ipsa debitis voluptate asperiores autem vitae. In laboriosam fuga modi sit non.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quo, tenetur at quam nostrum mollitia magnam vel iure, eius omnis aspernatur alias quae necessitatibus. Modi eveniet amet excepturi accusamus obcaecati! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, iure. Dolorum deserunt fugit officia aliquam, eveniet voluptatibus ab maxime et, accusantium nihil cumque temporibus reiciendis. Eveniet nam vitae adipisci et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus soluta veritatis laudantium ipsum rem. Beatae quisquam a cumque at nobis exercitationem. Necessitatibus enim ducimus explicabo, nisi qui aspernatur fugiat libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex, odit earum, tempore ducimus architecto recusandae laudantium distinctio labore aliquid ipsum atque quidem ab modi dolores adipisci est itaque magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid optio necessitatibus quisquam tenetur laudantium velit, porro illum eum quia molestias ratione earum, eos autem nostrum cumque unde hic adipisci. Placeat?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum incidunt ad, ex voluptatum iste illum perferendis velit nam numquam vero soluta, expedita minus ullam magnam veritatis exercitationem labore! Hic, unde? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Obcaecati blanditiis veritatis rem ipsa voluptas consectetur sint perspiciatis ex? Vel dolor corrupti repudiandae dicta ratione laborum voluptas cum consequuntur repellendus! Eius.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus minus excepturi accusamus doloremque architecto nisi nobis quasi libero dolore. Est impedit nihil ea voluptatibus omnis at magni facilis dolorem quam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto repellendus obcaecati blanditiis veritatis voluptate commodi a qui corporis sed voluptatibus vel at illo, optio ratione placeat, magni quam nam fugiat? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit ipsa in ex voluptatem! Tenetur, ducimus alias eaque iusto distinctio nostrum vero, dicta, earum fugit impedit nihil tempora non beatae! Incidunt? Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla necessitatibus omnis dolores, obcaecati eveniet, natus enim eaque sint asperiores saepe aperiam delectus? Ipsa dolor illum pariatur sapiente consequatur possimus esse?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus officiis corporis alias temporibus? Ipsa tempora, perspiciatis provident nesciunt nam hic non voluptatum optio laborum veritatis sint consequuntur similique fugit alias. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique magnam eum unde sapiente veniam error beatae optio explicabo, vel obcaecati, dolorem saepe cumque adipisci reiciendis minus inventore enim modi animi. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit modi facere omnis non? In magni provident nulla vero ipsa debitis voluptate asperiores autem vitae. In laboriosam fuga modi sit non.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora quo, tenetur at quam nostrum mollitia magnam vel iure, eius omnis aspernatur alias quae necessitatibus. Modi eveniet amet excepturi accusamus obcaecati! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae, iure. Dolorum deserunt fugit officia aliquam, eveniet voluptatibus ab maxime et, accusantium nihil cumque temporibus reiciendis. Eveniet nam vitae adipisci et.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus soluta veritatis laudantium ipsum rem. Beatae quisquam a cumque at nobis exercitationem. Necessitatibus enim ducimus explicabo, nisi qui aspernatur fugiat libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos ex, odit earum, tempore ducimus architecto recusandae laudantium distinctio labore aliquid ipsum atque quidem ab modi dolores adipisci est itaque magni. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid optio necessitatibus quisquam tenetur laudantium velit, porro illum eum quia molestias ratione earum, eos autem nostrum cumque unde hic adipisci. Placeat?</p>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navigator");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>
答案 1 :(得分：0)
您好，粘性类相对于您的父本可以处于绝对位置