HTML– ‘位置：粘’不坚持

概述我创建了一个侧边栏,当用户向下滚动时,我只是试图让它在标题下大约15px.我最初使用的是JS,但它确实使我的页面速度陷入困境,而且事情变得不稳定.我发现粘贴位置应该适用于大多数浏览器,但是我的侧边栏并没有坚持滚动.我已经在各个地方阅读,以确保没有高度设置和任何类型的溢出到父元素,它不是.所以我正在努力找到问题的原因.我想知道是否有其他因素我没有在网上找到可能

我创建了一个侧边栏,当用户向下滚动时,我只是试图让它在标题下大约15px.我最初使用的是Js,但它确实使我的页面速度陷入困境,而且事情变得不稳定.我发现粘贴位置应该适用于大多数浏览器,但是我的侧边栏并没有坚持滚动.

我已经在各个地方阅读,以确保没有高度设置和任何类型的溢出到父元素,它不是.所以我正在努力找到问题的原因.我想知道是否有其他因素我没有在网上找到可能对位置产生影响的因素：粘性

.btn.sIDebar {  backface-visibility: hIDden;  Box-shadow: 0 0 1px rgba(0,0);  display: inline-block;  position: relative;  vertical-align: mIDdle;  wIDth: 100%;  background: rgba(255,255,.6);  border-radius: 0;  Font-size: 22px;  Transition: ease .5s;}.btn.sIDebar:hover {  background: #97B2AC;  color: #fff;}p.contact-text {  color: #eee;  text-align: center;}div.modal-form-sIDebar {  position: sticky;  position: -webkit-sticky;  top: 0px;  Font: 95% Arial,Helvetica,sans-serif;  wIDth: 320px;  padding: 16px;  background: #5d84a1;}.modal-form-sIDebar h1 {  background: rgba(255,.4);  padding: 13px 0;  Font-size: 140%;  Font-weight: 300;  text-align: center;  color: #fff;  margin: 0;}.modal-form-sIDebar input[type="text"],.modal-form-sIDebar input[type="date"],.modal-form-sIDebar input[type="datetime"],.modal-form-sIDebar input[type="email"],.modal-form-sIDebar input[type="number"],.modal-form-sIDebar input[type="search"],.modal-form-sIDebar input[type="time"],.modal-form-sIDebar input[type="url"],.modal-form-sIDebar textarea,.modal-form-sIDebar select {  -webkit-Transition: all 0.30s ease-in-out;  -moz-Transition: all 0.30s ease-in-out;  -ms-Transition: all 0.30s ease-in-out;  -o-Transition: all 0.30s ease-in-out;  outline: none;  Box-sizing: border-Box;  -webkit-Box-sizing: border-Box;  -moz-Box-sizing: border-Box;  wIDth: 100%;  background: #fff;  margin-bottom: 4%;  border: 1px solID #ccc;  padding: 3%;  color: #555;  Font: 95% Arial,sans-serif;}.modal-form-sIDebar input[type="text"]:focus,.modal-form-sIDebar input[type="date"]:focus,.modal-form-sIDebar input[type="datetime"]:focus,.modal-form-sIDebar input[type="email"]:focus,.modal-form-sIDebar input[type="number"]:focus,.modal-form-sIDebar input[type="search"]:focus,.modal-form-sIDebar input[type="time"]:focus,.modal-form-sIDebar input[type="url"]:focus,.modal-form-sIDebar textarea:focus,.modal-form-sIDebar select:focus {  Box-shadow: 0 0 5px #5d84a1;  padding: 3%;  border: 1px solID #5d84a1;}.modal-form-sIDebar input[type="submit"],.modal-form-sIDebar input[type="button"] {  Box-sizing: border-Box;  -webkit-Box-sizing: border-Box;  -moz-Box-sizing: border-Box;  wIDth: 100%;  padding: 3%;  background: #5d84a1;  border-bottom: 2px solID #374F60;  border-top-style: none;  border-right-style: none;  border-left-style: none;  color: #fff;}.modal-form-sIDebar input[type="submit"]:hover,.modal-form-sIDebar input[type="button"]:hover {  background: #7d9cb3;}

最佳答案我认为它不起作用的原因是因为父容器没有高度. position：sticky只会将元素固定到父容器的高度.所以在你的情况下,没有父容器的高度,所以一旦它滚动到粘性元素,在父容器中没有粘性元素行进的距离所以看起来没有发生任何事情,因为当粘性元素到达顶部时就像位置从静态到固定一样,直到窗口到达父元素的底部.因此,当您的元素固定时,您的父容器中的高度为0.我建议你添加你的位置：粘贴到.col-md-4而不是侧边栏本身.
由于我不知道你的标记是什么样的,或者你使用的是什么版本的bootstrap我只是假设你正在使用bootstrap 3并且在这里创建了一个示例标记：
Fiddle Demo
在演示中我添加了位置：粘到col-xs-4并且它可以工作.如果你删除它并将其添加到侧边栏本身它将无法正常工作.现在,如果你一直向下滚动,你会看到粘性元素在它碰到下面的红色div时会停止.这是因为粘性元素的父级的高度已经结束.
所以在你的情况下,因为当从div中删除粘性元素时,父div的高度为0,并且没有空间可以滚动它.我建议像我在演示中所做的那样做并添加位置：粘到col-md-4而不是侧边栏本身.
@H_403_18@          总结       
以上是内存溢出为你收集整理的HTML  – ‘位置：粘’不坚持全部内容，希望文章能够帮你解决HTML  – ‘位置：粘’不坚持所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1119312.html