位置：-webkit-sticky 不适用于 safari

Question

我正在构建一个页面，该页面在页面顶部有一个粘性部分，我无法在postion:sticky我也尝试过的 Safari 上工作 position: -webkit-sticky;，但没有成功。我究竟做错了什么？实时版本链接：http://oxfordlocks.co.uk/Explore/beast.html// select video elementvar vid = document.getElementById('v0');//var vid = $('#v0')[0]; // jquery option// pause video on loadvid.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 scrollsetInterval(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);    }}<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>