javascript - 位置 : -webkit-sticky not working on safari

Question

我正在构建一个页面，该页面在页面顶部有一个粘性部分，我无法让 postion:sticky 在 safari 上工作，我已经尝试过 position: -webkit-sticky; 也有，但没有成功。

我做错了什么？

实时版本链接:http://oxfordlocks.co.uk/Explore/beast.html

// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option

// pause video on load
vid.pause();

// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function(){
    vid.pause();
};

// refresh video frames on interval for smoother playback
// pageXOffset/x will determine how fast a scroll will scrub through video
// the lower the number, the more frames will be covered in a scroll
setInterval(function(){
    vid.currentTime = window.pageYOffset/100;
}, 100);

// alternate between two specific locations on page with keystrokes 'f' and 'j'
document.body.onkeydown = function(event){
  event = event || window.event;
  var keycode = event.charCode || event.keyCode;
    if(keycode === 70){
        window.scrollTo(0,0);
    }
    else if (keycode === 74){
        window.scrollTo(0,800);
    }
}

.box{
text-align: center;
position: relative;
width: 100%;
margin-top: 100px;
margin-left: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; 
}
#set-height {
  display: block;
  height: 250vh;
  position: relative;
  padding-bottom: 50px;
}
#v0 {
  position: -webkit-sticky;
  position: sticky;
  top:200px;
  width: 90%;
background: red;


}

.intro{
  width: 60vw;
  min-width: 1200px;
  height: auto;
  margin: auto;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-top: 100px;
  margin-bottom: 100px;
}
.intro h3{
  width: 75%;
  margin-bottom:100px; 
}
.image-row{
  width: 100%;
  height: auto;
  max-height: 750px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 100px;
}
.intro-image{
  width: 100%;
  height: auto;
  margin-top: 50px;  
  object-fit: contain;
}
.intro-image.split{
width: 47.5%;
margin-top: 50px;
}
     

<div class="box">
  <div id="set-height">
    <p id="time"></p>
    <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
      <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="../Video/Beast-scroll-vid.mp4"></source> 
      <!-- <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="Beast_Drop_1.mp4"></source> -->
        <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
    </video>
  </div>
</div>
<div class="intro">
  <h3>The Beast is the ultimate diamond approved security solution for keeping your pride and joy secure</h3>
  <div class="image-row">
      <img src="../Images/Background-Images/beast-set-explosion.jpg" alt="" class="intro-image">
  </div>
</div>

Answer 1

看起来像<p id="time"></p>正在干扰position: -webkit-sticky;

// select video element
var vid = document.getElementById('v0');
//var vid = $('#v0')[0]; // jquery option

// pause video on load
vid.pause();

// pause video on document scroll (stops autoplay once scroll started)
window.onscroll = function(){
    vid.pause();
};

// refresh video frames on interval for smoother playback
// pageXOffset/x will determine how fast a scroll will scrub through video
// the lower the number, the more frames will be covered in a scroll
setInterval(function(){
    vid.currentTime = window.pageYOffset/100;
}, 100);

// alternate between two specific locations on page with keystrokes 'f' and 'j'
document.body.onkeydown = function(event){
  event = event || window.event;
  var keycode = event.charCode || event.keyCode;
    if(keycode === 70){
        window.scrollTo(0,0);
    }
    else if (keycode === 74){
        window.scrollTo(0,800);
    }
}

.box{
text-align: center;
position: relative;
width: 100%;
margin-top: 100px;
margin-left: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; 
}
#set-height {
  display: block;
  height: 250vh;
  position: relative;
  padding-bottom: 50px;
}
#v0 {
  position: -webkit-sticky;
  position: sticky;
  top:200px;
  width: 90%;
background: red;


}

.intro{
  width: 60vw;
  min-width: 1200px;
  height: auto;
  margin: auto;
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-top: 100px;
  margin-bottom: 100px;
}
.intro h3{
  width: 75%;
  margin-bottom:100px; 
}
.image-row{
  width: 100%;
  height: auto;
  max-height: 750px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 100px;
}
.intro-image{
  width: 100%;
  height: auto;
  margin-top: 50px;  
  object-fit: contain;
}
.intro-image.split{
width: 47.5%;
margin-top: 50px;
}

<div class="box">
  <div id="set-height">
    <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">
      <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="../Video/Beast-scroll-vid.mp4"></source> 
      <!-- <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="Beast_Drop_1.mp4"></source> -->
        <p>Sorry, your browser does not support the &lt;video&gt; element.</p>
    </video>
  </div>
</div>
<div class="intro">
  <h3>The Beast is the ultimate diamond approved security solution for keeping your pride and joy secure</h3>
  <div class="image-row">
      <img src="../Images/Background-Images/beast-set-explosion.jpg" alt="" class="intro-image">
  </div>
</div>