相关疑难解决方法(0)
"位置:粘;" 不工作的CSS和HTML
一旦我滚动到它,我想让导航栏坚持到顶部,但它不起作用,我不知道为什么.如果可以请求帮助,这是我的HTML和CSS代码:
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato",sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover{
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}<nav style="position: sticky; position: -webkit-sticky;">
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>130
推荐指数
推荐指数
18
解决办法
解决办法
17万
查看次数
查看次数
CSS:'position:sticky'在定义'height'时不起作用
我正在构建一个登录页面,用户首先看到一个主要区域,其下方有一个页脚.向下滚动显示页脚是一个粘性标题,我的目标是使用纯CSS来实现这一点.为了获得主要内容和页脚的全屏外观,我将height属性设置为两个不同的值:92%和8%(使用vh也不起作用).无论height我在我的CSS中指定(不同的单位和所有),我的页脚div都没有坚持.一旦我删除该height属性它就按预期工作.
这是删除属性之前我的页面的屏幕截图height:
正如你所看到的,它并没有坚持:
删除height属性值后,它确实粘贴:
这是我的HTML:
html,
body {
height: 100%;
margin: 0;
}
#main {
height: 92%;
}
#landing {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
#landingContent {
width: 20vw;
}
#footerNav {
height: 8%;
display: flex;
align-items: center;
position: -webkit-sticky;
position: sticky;
top: 0px;
}这是我(可能)相关的CSS:
<div id="main">
<div id="landing">
<div id="landingContent">
<h1 class="logo">Logo</h1> …8
推荐指数
推荐指数
2
解决办法
解决办法
9285
查看次数
查看次数
由于下面的内容，粘性导航栏停止工作
我有这个带有 的导航栏position: sticky，但是当它到达侧面导航的顶部和页面的内容时它会停止。我无法将 更改position为fixed，因为这样.ad上面的内容将不可见。我添加了属于侧面导航和内容的脚本。如何让我的导航栏继续运行，越过内容和侧边导航？
function sortBooks(upDown) {
var columns = document.getElementsByClassName("column")
function pricesToArray(columns) {
var prices = [];
for (var index = 0; index < columns.length; index++) {
var price = columns[index].querySelector('.price').innerText;
var priceInt = price.substr(1, price.length).replace(',', '.');
prices[index] = parseFloat(priceInt, 10);
}
return prices;
}
var prices = pricesToArray(columns);
function selectionSort(arr, upDown) {
var minIdx, temp,
len = arr.length;
for (var i = 0; i < len; i++) {
minIdx = …6
推荐指数
推荐指数
1
解决办法
解决办法
84
查看次数
查看次数
当元素被包裹在另一个元素中时，为什么 position:sticky 不起作用？
我正在试验粘性导航，但遇到了问题。问题是，当我将导航放在其他元素中时，它不再具有粘性。
.nav-wrapper{
position: absolute;
bottom: 0;
}
.nav-wrapper nav{
position: sticky;
top: 0;
} <div class="nav-wrapper">
<nav>
<a href="#"><li>Home</li></a>
<a href="#"><li>About</li></a>
</nav>
</div>3
推荐指数
推荐指数
1
解决办法
解决办法
1857
查看次数
查看次数
为什么带有position：sticky的元素不会停留在父对象的底部？
我试图了解CSS的“粘性”功能。我可以让它坚持其父级的“顶部”，而不是其“底部”
我的测试代码是：
.block {
background: pink;
width: 50%;
height: 200px;
}
.move {
position: sticky;
bottom: 0;
}1111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>11111<br/>
<div class="block">
AAAA
<div class="move">
BBBB
</div>
</div>
222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>222222<br/>当我将“ move”设置为“ top：0”时，它停留在粉红色块的顶部，但是当我将其设置为“ bottom：0”时，它似乎不再固定/发粘。
3
推荐指数
推荐指数
2
解决办法
解决办法
623
查看次数
查看次数