元素因未知原因未粘住

你好，我正试图使用position:sticky属性制作一个导航栏，但由于某种原因，它没有粘住，我在网上搜索了答案，但找不到任何修复方法，所以我是

/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}

/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}

/*img is not part of original code just there to show it dose not stick*/

<!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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><a href="#port" class="Port"><b>What Is Port</b></a></li>
<li><a href="#priv" class="Priv"><b>Privacy</b></a></li>
<li><a href="#reg" class="Reg"><b>Get Started</b></a></li>
<li><a href="#guides" class="Guides"><b>Guides</b></a></li>
<li><a href="#cred" class="Cred"><b>Credits</b></a></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>

我不知道为什么它不起作用——可能是我在错误的地方使用了它。

我计划让它更具响应性，但这需要改天，所以请原谅较小窗口的UI不好。

您已将position: sticky;添加到<ul>中。然而，sticky不会将元素移出流。表示一旦父元素离开视口，该元素将离开视口。

因此，您必须不将sticky添加到<ul>，而是将包含的<div>添加到

sticky受到所有具有IE选项的浏览器的支持(从2021年8月16日开始将被弃用，即使有供应商前缀也不支持粘性)

/* css changes */
.navBar {
position: sticky;
top: 0;
}

/* original css */
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}

/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}

/*img is not part of original code just there to show it dose not stick*/

<!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">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><a href="#port" class="Port"><b>What Is Port</b></a></li>
<li><a href="#priv" class="Priv"><b>Privacy</b></a></li>
<li><a href="#reg" class="Reg"><b>Get Started</b></a></li>
<li><a href="#guides" class="Guides"><b>Guides</b></a></li>
<li><a href="#cred" class="Cred"><b>Credits</b></a></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>

相关内容

最新更新

热门标签：