Question

位置：当我将它应用于div的孩子时，粘性似乎不适合我。怎么解决？

HTML：

Lorem Ipsum
<div class="this-parent-div-is-necessary">
   <div class="div-sticky-class">
     Test
   </div>
</div>
Lorem Ipsum

CSS：

.div-sticky-class{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

示例：https://jsfiddle.net/n8Le2tva/

Answer 1

将所有内容放入this-parent-div-is-necessary容器中。

.div-sticky-class {
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

<div class="this-parent-div-is-necessary">
  Lorem Ipsum
  <div class="div-sticky-class">
    Test
  </div>
  Lorem Ipsum
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>

Answer 2

您的粘性元素按预期工作，您无法看到它，因为您的容器div与粘性元素本身一样短，所以只要它粘贴，父容器就已经滚动出视图了。

如果您在父div中添加br标签，那么您可以看到它。滚动经过父级后，它将与父级滚动，并且不再可见，因为您可以从原始小提琴中看到。此页面上的示例https://developer.mozilla.org/en/docs/Web/CSS/position

如果您尝试将此停靠在整个页面上，则只需将粘性元素放在更高级别的div下，例如包含所有页面内容的div。只要记住它何时粘住它只会粘在父容器中

https://jsfiddle.net/n8Le2tva/3/

HTML

<div class="this-parent-div-is-necessary">
  <div class="div-sticky-class">
      Test
  </div>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/>
</div>

此示例https://jsfiddle.net/n8Le2tva/10/我将粘性元素移出，以便它粘贴到整个视口

Answer 3

粘滞位置仅适用于父div，你的html应该是这样的：

        var pivotTable = new PivotTable(lines, columns, pivotData);

        var htmlResult = new StringWriter();
        var jsonResult = new StringWriter();
        var pvtHtmlWr = new PivotTableHtmlWriter(htmlResult);
        var chartJsonWr = new PivotTableJsonWriter(jsonResult);
        pvtHtmlWr.Write(pivotTable);
        chartJsonWr.Write(pivotTable);

        return new   {Pvt = htmlResult.ToString(), Chart = jsonResult.ToString()};

https://jsfiddle.net/n8Le2tva/7/

Answer 4

实际上它正在工作。但是类div-sticky-class的div位于另一个移动的div（带有类this-parent-div-is-necessary）内。好吧，如果你想要它工作，你可以给外部div相同的类，例如

Lorem Ipsum
<div class="this-parent-div-is-necessary div-sticky-class">
  <div class="div-sticky-class">
      Test
  </div>
</div>
Lorem Ipsum

Answer 5

问题是<br>标记，您多次使用以创建滚动空间，以便检查粘性内容。只是给出一个高度就可以解决问题。

.this-parent-div-is-necessary {
    height: 11111px;
}

应用位置：粘贴到div的子级

5 个答案: