位置：-webkit-sticky 不适用于 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);

    }

}

<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 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(){&nbsp; &nbsp; 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(){&nbsp; &nbsp; vid.currentTime = window.pageYOffset/100;}, 100);// alternate between two specific locations on page with keystrokes 'f' and 'j'document.body.onkeydown = function(event){&nbsp; event = event || window.event;&nbsp; var keycode = event.charCode || event.keyCode;&nbsp; &nbsp; if(keycode === 70){&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(0,0);&nbsp; &nbsp; }&nbsp; &nbsp; else if (keycode === 74){&nbsp; &nbsp; &nbsp; &nbsp; window.scrollTo(0,800);&nbsp; &nbsp; }}.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;&nbsp;}#set-height {&nbsp; display: block;&nbsp; height: 250vh;&nbsp; position: relative;&nbsp; padding-bottom: 50px;}#v0 {&nbsp; position: -webkit-sticky;&nbsp; position: sticky;&nbsp; top:200px;&nbsp; width: 90%;background: red;}.intro{&nbsp; width: 60vw;&nbsp; min-width: 1200px;&nbsp; height: auto;&nbsp; margin: auto;&nbsp; display: flex;&nbsp; flex-direction: column;&nbsp; text-align: left;&nbsp; margin-top: 100px;&nbsp; margin-bottom: 100px;}.intro h3{&nbsp; width: 75%;&nbsp; margin-bottom:100px;&nbsp;}.image-row{&nbsp; width: 100%;&nbsp; height: auto;&nbsp; max-height: 750px;&nbsp; display: flex;&nbsp; flex-direction: row;&nbsp; justify-content: space-between;&nbsp; margin-bottom: 100px;}.intro-image{&nbsp; width: 100%;&nbsp; height: auto;&nbsp; margin-top: 50px;&nbsp;&nbsp;&nbsp; object-fit: contain;}.intro-image.split{width: 47.5%;margin-top: 50px;}<div class="box">&nbsp; <div id="set-height">&nbsp; &nbsp; <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload">&nbsp; &nbsp; &nbsp; <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="../Video/Beast-scroll-vid.mp4"></source>&nbsp;&nbsp; &nbsp; &nbsp; <!-- <source type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;" src="Beast_Drop_1.mp4"></source> -->&nbsp; &nbsp; &nbsp; &nbsp; <p>Sorry, your browser does not support the &lt;video&gt; element.</p>&nbsp; &nbsp; </video>&nbsp; </div></div><div class="intro">&nbsp; <h3>The Beast is the ultimate diamond approved security solution for keeping your pride and joy secure</h3>&nbsp; <div class="image-row">&nbsp; &nbsp; &nbsp; <img src="../Images/Background-Images/beast-set-explosion.jpg" alt="" class="intro-image">&nbsp; </div></div>