Question

在滚动位于div的父div时，需要放置fixed粘性。请检查以下代码段。

<style>
   .outer{
     width:300px;
     height:400px;
     border:1px solid red;
     overflow:auto;
     position:fixed;
     top:50px;
     left:100px;
   }
   .tag{
    position:absolute;
    top:0px;
    left:80px;
    background:#ffcc33;
    border:2px solid #dfa800;
    border-top:0px;
    padding:3px 5px;
   }
   .inner{
     height:800px;
     border:1px solid green;
     margin:0px 5px;
   }
 </style>

 <div  class="outer"> <!-- This is scroll-able-->
   <div class="tag">Click here to Refresh</div><!-- This should be sticky-->
   <div class="inner"><!--This content causes scrolling-->
      Inner content...........
   </div>
 </div>

所以在这里，tag部分应该贴在outer div的顶部。这是fiddle

使用纯css是否有任何解决方法。

Answer 1

我用css看到的唯一方法是将标签置于固定位置，并将其与父div相同。

像这样：

.outer {
     width: 300px;
     height: 400px;
     border: 1px solid red;
     overflow: auto;
     position: fixed;
     top: 50px;
     left: 100px;
   }
   
   .tag {
     position: fixed;
     top: 50px;
     left: 180px;
     background: #ffcc33;
     border: 2px solid #dfa800;
     border-top: 0px;
     padding: 3px 5px;
   }
   
   .inner {
     height: 800px;
     border: 1px solid green;
     margin: 0px 5px;
   }

<div class="outer">
  <div class="tag">Click here to Refresh</div>
  <div class="inner">
    Inner content...........
  </div>
</div>

Answer 2

这是一个解决方案，它适用于chrome。现在万一其他地方失败（可能是由于与嵌套固定定位的不一致），如果标签元素不必在固定位置元素内，并且可以在其外部，它肯定会起作用。

   .outer {
     width: 300px;
     height: 400px;
     border: 1px solid red;
     overflow: auto;
     position: fixed;
     top: 50px;
     left: 100px;
   }

   .tag {
     position: fixed;
     top: 50px;
     left: 180px;
     background: #ffcc33;
     border: 2px solid #dfa800;
     border-top: 0px;
     padding: 3px 5px;
   }

https://jsfiddle.net/ce14vcqL/4/

Answer 3

尝试在标记周围引入包装div - 这样您就可以将包装器上的定位逻辑分开，并将标记设置为position: fixed;以获得粘性。请注意，标签上的position: fixed;本身会将其拉出正常的dom流量，因此您需要调整其位置。

HTML

<div class="tag-wrapper">
    <div class="tag">Click here to Refresh</div>
</div>

CSS

.tag-wrapper {
    position: absolute;
    top: 0px;
    left: 80px;
}

.tag {
    position: fixed;
    background: #ffcc33;
    border: 2px solid #dfa800;
    border-top: 0px;
    padding: 3px 5px;
}

click to see fiddle

Answer 4

如果你想要它在绝对位置，父母不应该是滚动的，因为它将跟随滚动（coordonate 0保持在顶部并且随着滚动一样上升）。

您可以只滚动内部div：

   .outer {
     width: 300px;
     height: 400px;
     border: 1px solid red;
     position: fixed;
     top: 50px;
     left: 100px;
   }
   
   .tag {
     position: absolute;
     top: 0px;
     left: 80px;
     background: #ffcc33;
     border: 2px solid #dfa800;
     border-top: 0px;
     padding: 3px 5px;
   }
   
   .inner {
     overflow: auto;
     height: 100%;
     border: 1px solid green;
     margin: 0px 5px;
   }

<div class="outer">
  <div class="tag">Click here to Refresh</div>
  <div class="inner">
    Inner content...........
    <br/><!-- content needed to show the scroll bar -->
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    end
  </div>
</div>

我的答案的目的主要是帮助你理解它是如何工作的:)并且你的初始CSS实际上没有问题，只是不是为预期的行为做这件事。

Answer 5

您可以将标签移到固定容器外面并将其固定在同一位置吗？

固定定位div内的粘性div

5 个答案: