位置：Chrome与Safari中的粘性

Question

在Chrome和Safari中，似乎position: sticky的处理方式不同。我会尽力解释这个问题，但请参考下面的小提琴和片段看发生了什么。

我已经编辑了这篇文章，因为我不相信我能很好地解释我的第一个版本中发生了什么。

Fiddle #1 - 最高值为0

在这个小提琴中，sticky定位的元素的最高值为0。这应该基本上意味着元素总是fixed。在Safari中，这显示的元素类似于“绝对定位到前0像素的父元素”。

它按照我的意图运作，但对我来说没有多大意义。 为什么相对于父元素top: 0 ，当粘贴定位元素应该是相对的，直到它们被修复（并且固定元素相对于窗口不是元素）？

我所说的是我希望需要在粘性元素上加上top: 40px值才能让它按照我想要的方式运行，但似乎我不 ;大。

在同一个小提琴中，在Chrome中，它的功能与我的期望相同。 top: 0值“修复”元素相对于浏览器窗口的0像素而不是父元素...

所以，如果我想拥有我想要的元素函数（基本上在父元素中修复），我将top值设置为40px，除非这不正常。

Fiddle #2 - 最高价值40px

这个小提琴看起来在视觉上正确在Chrome 中，但我无法与输入交互（除非我点击它下方的“空”空间）。在Safari中，它可以正常运行，但从父元素开始 40px。

很明显，这些浏览器以不同的方式处理position: sticky。

哪种方式正确？并且有没有办法让它在每个浏览器中正常运行？

请，我不是在寻找如何完成效果的建议，而是为什么浏览器之间存在这样的差异。下面的一个回答者指出，他们认为这可以通过position: fixed元素来实现，但无法解决这种方式（固定元素，在固定元素中具有溢出滚动，在一个正文中）在这种特定情况下：See Example

小提琴＃1代码段

document.getElementById("toggle").addEventListener("click", function() {
    if (document.body.classList.contains("show-tracking")) {
        document.body.classList.remove("show-tracking");
    } else {
        document.body.classList.add("show-tracking");
        fix_safari_scroll("tracking");
    }
});

function fix_safari_scroll(id) {
    document.getElementById(id).style.overflowY = "hidden";
    setTimeout(function() {
        document.getElementById(id).style.overflowY = "scroll";
        document.getElementById(id).removeAttribute("style");
    }, 200);
}

header {
    background: blue;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#ticker,
#tracking {
    padding-top: 40px;
}

#ticker {
    background: grey;
    position: relative;
    z-index: 1;
}

#tracking {
    background: lightblue;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in;
    transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
    max-height: 100vh;
}

.show-tracking {
    overflow: hidden;
}

.show-tracking #tracking {
    transform: translate3d(0, 0, 0);
    overflow-y: scroll;
}

.filter {
    background: yellow;
    position: -webkit-sticky;
    position: sticky;
    position: fixed;
    width: 100%;
    top: 40px;
    left: 0;
}

<header>
    Header<button id="toggle">toggle</button>
</header>
<div id="ticker">
    <div style="padding: 400px 0;">ticker</div>
    ticcker
</div>
<div id="tracking">
    <div class="filter"><input type="text"></div>
    <div style="padding: 400px 0;">tracking</div>
    tracking
</div>

小提琴＃2代码段

document.getElementById("toggle").addEventListener("click", function() {
    if (document.body.classList.contains("show-tracking")) {
        document.body.classList.remove("show-tracking");
    } else {
        document.body.classList.add("show-tracking");
        fix_safari_scroll("tracking");
    }
});

function fix_safari_scroll(id) {
    document.getElementById(id).style.overflowY = "hidden";
    setTimeout(function() {
        document.getElementById(id).style.overflowY = "scroll";
        document.getElementById(id).removeAttribute("style");
    }, 200);
}

header {
    background: blue;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#ticker,
#tracking {
    padding-top: 40px;
}

#ticker {
    background: grey;
    position: relative;
    z-index: 1;
}

#tracking {
    background: lightblue;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in;
    transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
    max-height: 100vh;
}

.show-tracking {
    overflow: hidden;
}

.show-tracking #tracking {
    transform: translate3d(0, 0, 0);
    overflow-y: scroll;
}

.filter {
    background: yellow;
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    top: 40px;
    left: 0;
}

<header>
    Header<button id="toggle">toggle</button>
</header>
<div id="ticker">
    <div style="padding: 400px 0;">ticker</div>
    ticcker
</div>
<div id="tracking">
    <div class="filter"><input type="text"></div>
    <div style="padding: 400px 0;">tracking</div>
    tracking
</div>

示例小提琴片

document.getElementById("toggle").addEventListener("click", function() {
    if (document.body.classList.contains("show-tracking")) {
        document.body.classList.remove("show-tracking");
    } else {
        document.body.classList.add("show-tracking");
        fix_safari_scroll("tracking");
    }
});

function fix_safari_scroll(id) {
    document.getElementById(id).style.overflowY = "hidden";
    setTimeout(function() {
        document.getElementById(id).style.overflowY = "scroll";
        document.getElementById(id).removeAttribute("style");
    }, 200);
}

header {
    background: blue;
    height: 40px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}

#ticker,
#tracking {
    padding-top: 40px;
}

#ticker {
    background: grey;
    position: relative;
    z-index: 1;
}

#tracking {
    background: lightblue;
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate3d(100%, 0, 0);
    -webkit-transition: -webkit-transform 200ms ease-in;
    transition: -webkit-transform 200ms ease-in;
    transition: transform 200ms ease-in;
    transition: transform 200ms ease-in, -webkit-transform 200ms ease-in;
    max-height: 100vh;
}

.show-tracking {
    overflow: hidden;
}

.show-tracking #tracking {
    transform: translate3d(0, 0, 0);
    overflow-y: scroll;
}

.filter {
    background: yellow;
    position: fixed;
    width: 100%;
    top: 40px;
    left: 0;
}

<header>
    Header<button id="toggle">toggle</button>
</header>
<div id="ticker">
    <div style="padding: 400px 0;">ticker</div>
    ticcker
</div>
<div id="tracking">
    <div class="filter"><input type="text"></div>
    <div style="padding: 400px 0;">tracking</div>
    tracking
</div>

Answer 1

在这种情况下，似乎不需要使用位置：粘性。在您的示例中，永远不需要滚动红色输入栏。当元素位于页面顶部时，Sticky帮助提供状态更改。这个元素从头到尾固定在某个位置，所以你可以只使用固定位置（甚至是绝对位置），这里

    *,
*:before,
*:after  {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  position: relative;
}

header {
  height: 20px;
  background: yellow;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}

.el {
  background: grey;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  overflow-y: scroll;
  max-height: 100vh;
}

.content {
  background: lightblue;
}

.content span {
  display: block;
  padding: 250px 0;
}

.sticky {
  background: red;
  width: 100%;
  position: fixed;
  top: 20px;
}

查看Apple对位置的使用：sticky here =＆gt; https://www.apple.com/do-more/