当您向下滚动页面时,只要您通过视频结尾,标题就会跳起来。
注意滚动浏览视频结尾后标题是如何上下跳转的?但这并不是在每个浏览器上都会发生,到目前为止,只能确认它会影响chrome。
具有类似布局的此网站没有此问题。
导致这种情况的原因是什么?
我正在将此脚本用于全屏背景视频https://github.com/linnett/backgroundVideo
HTML
<header>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO HERE</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="./">Credit Line</a></li>
<li><a href="../navbar-static-top/">Corporate Credit</a></li>
<li><a href="../navbar-static-top/">About</a></li>
<li><a href="../navbar-static-top/">Contact Us</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</header>
<section id="who-we-are">
<div id="video-wrap" class="video-wrap">
<video preload="metadata" autoplay loop id="my-video">
<source src="http://www.marketstreetcredit.com/test/lib/vid/skyline.mp4" type="video/mp4" />
</video>
<div class="content-overlay">
<h1>Lorem ipsum</h1>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
CSS
section {
display: block;
height: 2000px;
}
header .container {
padding: 14px;
}
#navbar li.active a {
color: #4DBCE9;
}
#navbar li a {
padding: 10px;
line-height: 30px;
text-transform: uppercase;
font-size: 15px;
color: #303030;
position: relative;
background: 0 0!important;
font-weight: 500;
font-family: Quicksand-Light;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#navbar li a:hover {
color: #4DBCE9;
}
.content-overlay {
position: relative;
z-index: 20;
padding: 15%;
}
video {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: baseline;
}
.video-wrap {
height: 100%;
width: 100%;
}
的Javascript
$(document).ready(function() {
$('#my-video').backgroundVideo({
pauseVideoOnViewLoss: false,
parallaxOptions: {
effect: 1.9
}
});
});