【发布时间】：2018-06-05 10:59:42
【问题描述】：
我创建了一个侧边栏，我只是想让它在用户向下滚动时保持在标题下方约 15 像素处。我最初为此使用 JS，但它确实使我的页面速度下降并且事情变得不稳定。我发现位置粘性应该适用于大多数浏览器，但是我的侧边栏没有粘在滚动上。
我已经在不同的地方阅读以确保没有设置高度和任何类型的溢出到父元素，但事实并非如此。所以我正在努力寻找问题的原因。我想知道是否还有其他我没有在网上找到的因素可能会影响position:sticky
.btn.sidebar {
backface-visibility: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
display: inline-block;
position: relative;
vertical-align: middle;
width: 100%;
background: rgba(255, 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, 255, 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, Helvetica, 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;
}<div class="modal-form-sidebar">
<p class="contact-text">Text here</p>
<h1>Email Us</h1>
<form action="#" id="client_capture_sidebar" method="POST" onsubmit="submitted=true;" target="hidden_iframe" role="form">
<input type="text" name="field1" placeholder="Your Name" />
<input type="email" name="field2" placeholder="Email Address" />
<input type="email" name="field2" placeholder="Phone Number" />
<textarea name="field3" placeholder="Type your Message"></textarea>
<input type="submit" value="Send" />
</form>
<br>
<div class="white-txt">or</div>
<br>
<h1>Call Us</h1>
<a class="btn sidebar" href="tel:1-222-222-2222"><i class="fa fa-phone" aria-hidden="true"></i>(222) 222-2222</a>
</div>【问题讨论】：
-
您尝试定位的 div 是否粘贴在父元素中？
-
Seems to work for me。虽然，我没有看到你的标题。您到底期望什么不会发生？也许我误解了你的意图。
-
是的，我将它包装在 col-md-4 和侧边栏包装器中，它们都没有任何高度或溢出属性。我只是希望一旦我在标题下方获得 15px 就可以修复侧边栏。我确实将顶部属性更改为 135px 以容纳标题。它必须检查其他容器是否导致问题。我正在使用 wordpress，所以一切都在侧边栏模板中。
-
它确实有效，但它一直有效，直到它被接下来的兄弟姐妹推高。如果粘性有用，它也不会像预期的那样工作（使用被误解或错误），但如果它被困在
top:0;（就像固定元素一样），你将永远无法看到 或致电我们... 我实际上并不清楚你试图做什么 :) -
代码 sn-p 没有显示我想要完成的工作。那是社区的编辑。我正在尝试使侧边栏在用户向下滚动页面时保持在视图中。我知道使用 JS 有其他方法可以做到这一点，但我希望 position:sticky 是一种干净、快速的方式来完成这个。
标签： html css css-position