我正在構建一個頁面，該頁面在頁面頂部有一個粘性部分，我無法在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="avc1.42E01E, mp4a.40.2"" src="../Video/Beast-scroll-vid.mp4"></source> <!-- <source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="Beast_Drop_1.mp4"></source> --> <p>Sorry, your browser does not support the <video> 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>
1 回答
aluckdog
TA貢獻1847條經驗 獲得超7個贊
看起來好像<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="avc1.42E01E, mp4a.40.2"" src="../Video/Beast-scroll-vid.mp4"></source>
<!-- <source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="Beast_Drop_1.mp4"></source> -->
<p>Sorry, your browser does not support the <video> 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>
- 1 回答
- 0 關注
- 193 瀏覽
添加回答
舉報
0/150
提交
取消