＆＃39;职位：粘性＆＃39;不坚持

时间：2017-12-22 21:10:47

标签： html css css-position

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

我已经在各个地方阅读过以确保没有高度设置和任何类型的溢出到父元素，它不是。所以我正在努力找到问题的原因。我想知道是否有其他因素我没有在网上找到可能对position:sticky

产生影响的因素

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：3)

我认为它不起作用的原因是因为父容器没有高度。 position:sticky只会将元素修复为父容器的高度。所以在你的情况下，没有父容器的高度，所以一旦它滚动到粘性元素，在父容器中没有粘性元素行进的距离所以看起来没有发生任何事情，因为当粘性元素到达顶部时就像位置从静态到固定一样，直到窗口到达父元素的底部。因此，当您的元素固定时，您的父容器中的高度为0。我建议您将position:sticky添加到.col-md-4而不是侧边栏本身。

由于我不知道您的标记是什么样的，或者您使用的是什么版本的引导程序，我只是假设您正在使用bootstrap 3并在此处创建了一个示例标记：

Fiddle Demo

在演示中，我已将position:sticky添加到col-xs-4，但它确实有效。如果你删除它并将其添加到侧边栏本身它将无法正常工作。现在，如果你一直向下滚动，你会看到粘性元素在它碰到下面的红色div时会停止。这是因为粘性元素的父级的高度已经结束。

因此，在你的情况下，当从div中删除粘性元素时，父div的高度为0，并且没有空间进行滚动。我建议像我在演示中所做的那样，将position:sticky添加到col-md-4而不是侧边栏本身。

答案 1 :(得分：0)

确实有效，但实现了position:sticky。见https://caniuse.com/#search=sticky

添加一些内容以查看它是否存在，如果它的行为符合您的预期，则会在一个片段下方直到将其推上。这实际上是正确的行为。

＆＃13;
＆＃13; 
.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;
}

.scrollme {overflow:hidden;height:200vh;background:pink;margin:1em;}
footer {
height:25vh;background:gray;margin:1em;}
＆＃13; 
<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 class="scrollme">tall div</div>
<footer>footer</footer>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题