Question

嘿那里:)我正在尝试使视频适合浏览器窗口大小，并在浏览器窗口高度的底部添加图像。因此，当您加载页面时，视频和图像是唯一显示的内容。滚动时，应显示网站内容。

我已经做了一些事情来说明这个想法：http://instagib.dk/JS-test/

问题是，当我开始添加网站内容时，它会显示在视频和图片下方。问题似乎是我已经把它变成了绝对的文件背景。

是否有任何JS，Jquery解决方案可以读取绝对内容的高度并在视频后面放置内容？

干杯：）

<body>
<!-- Header -->
<header class="header">
    <div class="header-bg">
        <div class="logo-top"></div>
    </div>
    <nav>
        <div class="menu">
            <div class="hamburger"></div>
            <div class="hamburger"></div>
            <div class="hamburger"></div>
            <ul class="nav-list">
                <li><a href="#">Projects</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Advantages</a></li>
                <li><a href="#">Who are we</a></li>
                <li><a href="#">Work with us</a></li>
            </ul>
        </div>

    </nav>
</header>
<video class="intro" autoplay loop>
    <source src="video/black_clouds.mp4" type="video/mp4">
        <source src="video/black_clouds.webm" type="video/webm">
            Your browser does not support the video tag.
</video>
<div class="intro-seperator"></div>

<!-- Main content -->
<main class="content">
</main>

<!-- Footer -->
<footer>
    <small>&copy; Crafthouse 2014</small>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {

    divFade = $(".header-bg");

    var toggleHeader = function(noAnimate) {

        var threshold = 400,
            fadeLength = 300,
            opacity,
            scrollTop = $(document).scrollTop();

        if (scrollTop < threshold) {
            opacity = 0;
        } else if (scrollTop > threshold + fadeLength) {
            opacity = 1;
        } else {
            if (noAnimate) {
                opacity = 1;
            } else {
                opacity = (scrollTop - threshold) / fadeLength;
            }
        }

        divFade.css("opacity", opacity);

    };

    toggleHeader(true);
    $(window).scroll(function() {
        toggleHeader();
    });

});
</script>

CSS：

    *, 
*:before, 
*:after {
    box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
}
/*
  ========================================
  Layout: Header
  ========================================
*/

.header {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0px;
    color: #fff;
    z-index: 9999;
}

.header-bg {
    width: 100%;
    height: 60px;
    line-height: 60px;
    vertical-align: middle;
    background: #212121;
    position: absolute;
    opacity: 0;
    font-size: 25px;
}

.logo-top {
    background: url(../images/crafthouse-top-logo.png) no-repeat;
    width: 171px;
    height: 60px;
    margin: 0 auto;
}

.menu {
    width: 70px;
    height: 60px;
    padding-top: 20px;
    position: absolute;
    left: 8%;
}
.menu:hover {
    background: #000;
}
.hamburger {
    width: 30px;
    height: 3px;
    background: #fff;
    margin: 0 auto;
    margin-bottom: 5px;
}
.menu:hover .hamburger {
    background: #00ff91;
}

.nav-list {
    width: 150px;
    margin-top:20px;
    background: #000;
    display: none;
    padding: 20px 0 10px 18px;
    text-transform: uppercase;
}
.nav-list li {
   margin-bottom: 10px;
}
.nav-list li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
.nav-list li a:hover {
  color: #00ff91;
}

.menu:hover .nav-list {
    display: block;
}


.intro {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    background-size: cover;
}

.intro-seperator {
    background: url(../images/seperator-brush-top.png);
    height: 164px;
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
}

.test {
    width: 100%;
    height: 100%;
    background: #fff;
}
/*
  ========================================
  Layout: Content
  ========================================
*/

.content {
    height: 2000px;
}

Answer 1

对您的内容使用以下内容：

main{
    position:absolute;
    top:100%;
}

将实际内容移动到视频下方（假设main是您的内容元素）

将一个相对div置于绝对div生成的窗口高度下

1 个答案: