Question

http://www.marketstreetcredit.com/test/

当您向下滚动页面时，只要您通过视频结尾，标题就会跳起来。

注意滚动浏览视频结尾后标题是如何上下跳转的？但这并不是在每个浏览器上都会发生，到目前为止，只能确认它会影响chrome。

http://pigeon.ly/

具有类似布局的此网站没有此问题。

导致这种情况的原因是什么？

我正在将此脚本用于全屏背景视频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
        }
    });
});

滚动浏览视频时修复了标题跳转

0 个答案: