文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >‘'Position: sticky’不粘滞

问‘'Position: sticky’不粘滞
EN

Stack Overflow用户
提问于 2017-12-23 05:10:47
回答 3查看 8.3K关注 0票数 6

我已经创建了一个侧边栏，当用户向下滚动时，我只是试图让它在标题下粘贴大约15px。我最初使用JS来做这件事，但是它真的让我的页面速度变慢了，事情变得不稳定。我发现position sticky在大多数浏览器上都可以工作，但是我的侧边栏不能在scroll上使用。

我在不同的地方阅读，以确保没有高度设置和任何类型的溢出到父元素，但它不是。因此，我正在努力寻找问题的原因。我想知道是否还有其他我在网上找不到的因素可能会对position:sticky产生影响

​

代码语言：javascript
复制
.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;
}
代码语言：javascript
复制
<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>

​

html
css
css-position
EN

回答 3

Stack Overflow用户

发布于 2017-12-24 02:08:11

我认为它不工作的原因是因为您的父容器没有高度。position:sticky只会将元素固定到父容器的高度。所以在你的例子中，没有父容器的高度，所以一旦它滚动到粘性元素，就没有距离让粘性元素移动，所以看起来就像什么都没有发生，因为当粘性元素到达顶部时，它的作用就像是位置从静态变为固定，直到窗口到达父元素的底部。所以当你的元素变得固定时，在你的父容器中有一个高度为0。我建议您将position:sticky添加到.col-md-4中，而不是侧边栏本身。

由于我不知道您的标记是什么样子的，也不知道您使用的是什么版本的bootstrap，我只是假设您使用的是bootstrap 3，并且已经在以下位置创建了一个示例标记：

Fiddle Demo

在演示中，我在col-xs-4中添加了position:sticky，它可以正常工作。如果您删除它并将其添加到侧边栏本身，它将不会工作。现在，如果您一直向下滚动，您将看到当粘滞元素命中下面的红色div时，它将停止。这是因为粘性元素的父元素的高度已结束。

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

票数 5
EN

Stack Overflow用户

发布于 2017-12-23 06:23:13

它确实可以在上工作，但position:sticky是在哪里实现的。请参阅https://caniuse.com/#search=sticky

添加一些内容来查看它的粘性，如果它的行为如您所预期的那样，那么在它粘贴直到底部将其向上推送到的代码片段下面。这实际上是正确的行为。

​

代码语言：javascript
复制
.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;}
代码语言：javascript
复制
<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>

​

票数 0
EN

Stack Overflow用户

发布于 2021-12-11 12:56:53

​

代码语言：javascript
复制
.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;}
代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/47947446

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档