I have two section on screen, Left Side has menu items and right side has content. Content div is fixed position with auto scroll.
Left Side menu has 3 items and on click on any item, i want user to navigate to That particular section on content div(fixed) .
MY CODE
function goToByScroll(id) {
// Scroll
$('.content-pos-fixed').animate({
scrollTop: $("#" + id).offset().top - 152
},'slow');
}
For some reason It does not work as expected.
Try this code
function goToByScroll(id,event) {
event.preventDefault();
$('.content-pos-fixed').animate({
scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop()
},'slow');
}
$(document).ready(function(){
$('a').on('click',function(event){
var id=$(this).attr('href');
goToByScroll(id,event);
});
function goToByScroll(id,event) {
event.preventDefault();
$('.content-pos-fixed').animate({
scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop() },'slow');
}
});
* { margin: 0; padding: 0; box-sizing: border-box; font-family: arial; text-decoration: none; color: black; }
nav { position: fixed; top: 0; left: 0; right: 0; background: #fff; z-index: 9999; }
nav a { color: white; display: inline-block; padding: 1rem; float: left; font-weight: bold; }
section { height: 100vh; }
nav a:nth-child( 3n + 1), main section:nth-child( 3n + 1) { background: #B1A464; }
nav a:nth-child( 3n + 2), main section:nth-child( 3n + 2) { background: #2d74b2; }
nav a:nth-child( 3n + 3), main section:nth-child( 3n + 3) { background: #e5ec10; }
nav a:nth-child( 3n + 4), main section:nth-child( 3n + 4) { background: #cfa5df; }
div { position: relative; padding: 1rem; }
footer { background: rgba(255, 255, 255, 0.4); height: 55px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 7777; }
.down { background: white; display: block; border-radius: 100px; width: 50px; height: 50px; position: fixed; bottom: 5%; right: 5%; z-index: 8888; }
.down::after { content: "▼"; position: relative; left: 15px; top: 15px; }
nav a {
color: white;
display: inline-block;
padding: 1rem;
float: left;
font-weight: bold;
width: 100%;
}
nav {
position: fixed;
/* top: 0; */
left: 0;
right: 0;
background: #fff;
z-index: 9999;
width: 300px;
height: 100%;
}
main {
float: right;
width: calc(100% - 300px);
overflow: auto;
position: fixed;
right: 0;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<nav data-scroll-header>
<a data-scroll href="#Home">Home</a>
<a data-scroll href="#About">About</a>
<a data-scroll href="#Services">Services</a>
<a data-scroll href="#Contact">Contact</a>
</nav>
<main class="content-pos-fixed">
<section id="Home">
<div>
<h1>Home</h1>
</div>
</section>
<section id="About">
<div>
<h1>About</h1>
</div>
</section>
<section id="Services">
<div>
<h1>Services</h1>
</div>
</section>
<section id="Contact">
<div>
<h1>Contact</h1>
</div>
</section>
</main>
<footer>
<a data-scroll href="#About" class="down"></a>
</footer>
Related
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
}
.active {
opacity: 1;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
How can I get the FadeInLeft effect when changing content from .opacity=0 to .opacity=1 on the left side.
I tried to solve this problem with the given script, but it did not work for me.
P.S. See this layout in fullscreen.
Here is a very ruff first draft
Since you already have the .active class being added to your .subtitle class to change opacity, you can just tack on CSS Animation to those classes.
In my example I have .subtitle > div set to right: 100%; and .active > div set to right: 0%; with a transition: 300ms;
Which will animate the block from the left side of the screen over to the right side in 300ms. You can play around with this until you get the animation where you'd like.
Here's a great article from MDN with more information about Using CSS Transitions
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the color of an element from white to black, usually the change is instantaneous. With CSS transitions enabled, changes occur at time intervals that follow an acceleration curve, all of which can be customized.
Examples
div {
transition: <property> <duration> <timing-function> <delay>;
}
#delay {
font-size: 14px;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}
#delay:hover {
font-size: 36px;
}
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
window.addEventListener('scroll', () => {
let scrollDistance = window.scrollY;
if (window.innerWidth > 768) {
document.querySelectorAll('.section1').forEach((el, i) => {
if (el.offsetTop - document.querySelector('.nav').clientHeight <= scrollDistance) {
document.querySelectorAll('.nav a').forEach((el) => {
if (el.classList.contains('active')) {
el.classList.remove('active');
}
});
document.querySelectorAll('.nav li')[i].querySelector('a').classList.add('active');
}
});
}
});
body {
background: gray;
padding: 100px;
}
.block-2 {
display: flex;
flex-direction: row;
background: white;
width: 100%;
padding: 50px;
height: auto;
}
.section-left {
position: sticky;
top: 10px;
height: 300px;
/* background: gray; */
width: 100%;
}
.section-right {
background: blue;
width: 100%;
}
.wrap {
margin: 10px;
background: red;
}
.content {
height: 500px;
}
.footer {
width: 100%;
height: 700px;
background: red;
}
.nav {
position: relative;
left: 0;
top: 0;
width: 100%;
background-color: white;
/* padding: 20px;
*/
}
.nav ul {
display: flex;
list-style-type: none;
flex-direction: column;
padding: 0;
}
.nav a {
display: flex !important;
text-decoration: none;
color: black !important;
display: inline-block;
/* margin-right: 25px !important;
*/
}
#media screen and (max-width: 1024px) {}
.subtitle {
opacity: 0;
transition:300ms;
}
.subtitle > div {
transition:300ms;
right:100%;
}
.subtitle > div h1 {
opacity:0;
position:relative;
top:2em;
transition:300ms;
transition-delay:1s;
}
.active {
opacity: 1;
}
.active > div {
right:0;
}
.active > div h1 {
opacity:1;
top: 0;
}
.content1 {
position: absolute;
background-color: red;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content2 {
position: absolute;
background-color: gray;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content3 {
position: absolute;
background-color: green;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
.content4 {
position: absolute;
background-color: blue;
/*opacity: 0;*/
width: 100%;
height: 300px;
}
<body>
<div class="block-2">
<div class="section-left">
<nav class="nav">
<ul>
<li><a href="" class="active subtitle">
<div class="content1">
<h1>O1</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content2">
<h1>O2</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content3">
<h1>O3</h1>
</div>
</a></li>
<li><a href="" class="subtitle">
<div class="content4">
<h1>O4</h1>
</div>
</a></li>
</ul>
</nav>
</div>
<div class="section-right">
<div class="section1 wrap">
<div class="content">asdf</div>
</div>
<div class="wrap section1 ">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
<div class="wrap section1">
<div class="content">asdf</div>
</div>
</div>
</div>
<div class="footer"></div>
</body>
I have a problem with toggling the active nav-link using JavaScript. I think my CSS is causing some problems but I do not know why.
I have the CSS code down at the bottom if that is any help. I have linked Jquery and my own name.js document correctly in my HTML head. I want to toggle the active link when it is visited.
var header = document.getElementById("nav-bar")
var toggled_nav = document.getElementsByClassName("nav-item")
for (var i = 0; i < toggled_nav.length; i++) {
toggled_nav[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
#nav-bar {
margin: 27px auto 0;
position: relative;
width: 610px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
#nav-bar a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
#nav-bar .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
a:nth-child(3) {
width: 180px;
}
a:nth-child(4) {
width: 110px;
}
a:nth-child(5) {
width: 110px;
}
nav .start-home,
a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
nav .start-about,
a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #fcf75e;
}
nav .start-blog,
a:nth-child(3):hover~.animation {
width: 180px;
left: 210px;
background-color: #3498db;
}
nav .start-portefolio,
a:nth-child(4):hover~.animation {
width: 90px;
left: 400px;
background-color: #9b59b6;
}
nav .start-contact,
a:nth-child(5):hover~.animation {
width: 110px;
left: 500px;
background-color: #e67e22;
}
<nav id="nav-bar">
<a class="nav-item" href="#">HOME</a>
<a class="nav-item" href="#">POKEMON</a>
<a class="nav-item" href="#">LEAUGE OF LEGENDS</a>
<a class="nav-item" href="#">API-DOC</a>
<a class="nav-item" href="#">ABOUT US</a>
<div class="animation start-home"></div>
</nav>
I simplified your code and created specific active classes for each nav. You can give the parent the click handler and refer to the children through e.target since in this case the children take up the full space of the parent.
var header = document.getElementById("nav-bar")
header.addEventListener("click",function(e){
has_class = header.querySelector(".active");
if(has_class)has_class.classList.remove("active");
e.target.classList.add("active");
});
#nav-bar {
margin: 27px auto 0;
position: relative;
width: 610px;
height: 50px;
background-color: #34495e;
border-radius: 8px;
font-size: 0;
}
#nav-bar a {
line-height: 50px;
height: 100%;
font-size: 15px;
display: inline-block;
position: relative;
z-index: 1;
text-decoration: none;
text-transform: uppercase;
text-align: center;
color: white;
cursor: pointer;
}
#nav-bar .animation {
position: absolute;
height: 100%;
top: 0;
z-index: 0;
transition: all .5s ease 0s;
border-radius: 8px;
}
.active{
border-radius: 8px;
}
a:nth-child(1) {
width: 100px;
}
a:nth-child(2) {
width: 110px;
}
a:nth-child(3) {
width: 180px;
}
a:nth-child(4) {
width: 110px;
}
a:nth-child(5) {
width: 110px;
}
a:nth-child(1).active{
background:#1abc9c;
}
nav .start-home, a:nth-child(1):hover~.animation {
width: 100px;
left: 0;
background-color: #1abc9c;
}
a:nth-child(2).active{
background:#fcf75e;
}
nav .start-about, a:nth-child(2):hover~.animation {
width: 110px;
left: 100px;
background-color: #fcf75e;
}
a:nth-child(3).active{
background:#3498db;
}
nav .start-blog, a:nth-child(3):hover~.animation {
width: 180px;
left: 210px;
background-color: #3498db;
}
a:nth-child(4).active{
background:#9b59b6;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
width: 90px;
left: 400px;
background-color: #9b59b6;
}
a:nth-child(5).active{
background:#e67e22;
}
nav .start-contact, a:nth-child(5):hover~.animation {
width: 110px;
left: 500px;
background-color: #e67e22;
}
<nav id="nav-bar">
<a class="nav-item" href="#">HOME</a>
<a class="nav-item" href="#">POKEMON</a>
<a class="nav-item" href="#">LEAUGE OF LEGENDS</a>
<a class="nav-item" href="#">API-DOC</a>
<a class="nav-item" href="#">ABOUT US</a>
<div class="animation start-home"></div>
</nav>
For the first two .nav-item I see they are referring to different files. So in their curresponding files, you can mark them active.
For rest of the three .nav-item you can use (I am using JQuery since you mentioned it)
$('#nav-bar').on('click', '.nav-item', function(e) {
$('.nav-item.active', e.currentTarget).removeClass('active');
$(this).addClass('active');
}
make sure the css for the .active is being applied correctly.
You could do something like this; where you remove the active class for each item and then add it to the one that was clicked.
let items = document.querySelectorAll(".nav-item")
items.forEach(item => {
item.addEventListener("click", event => {
const current = document.querySelector('.active')
current.classList.remove('active')
item.classList.add("active")
})
})
I am trying to create the effect of a navigation bar having its text change color on scroll. the problem is that once you start scrolling, the hover effect done with css does not work anymore.
Does anyone know how to fix this?
This is my code:
$(document).ready(function() {
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if (scroll_pos > 600) {
$(".normalmenuitem").css('color', '#a9a9a9');
} else {
$(".normalmenuitem").css('color', '#5f666f');
}
});
});
body {
min-height: 4000px;
}
.box {
background-color: #fff;
position: absolute;
height: 59px;
width: 100%;
top: 0;
}
.navigationmenu {
position: fixed;
z-index: 1000;
top: 0;
width: 100%;
}
#logo {
transform: translateY(-50%);
position: absolute;
top: 29px;
left: 17px;
width: 160px;
}
/* top right menu! */
.holderrr {
position: absolute;
top: 10px;
right: 0px;
}
.rightmenu {
display: inline-block;
text-decoration: none;
text-align: center;
font-family: sourcesanspro-semibold;
font-size: 15px;
padding: 6px 17px 6px 17px;
}
.normalmenuitem {
padding: 6px 17px 6px 17px;
text-decoration: none;
color: #5f666f;
transition: .3s color;
}
.normalmenuitem:hover {
color: #292f36;
}
#trial {
color: #e16065;
}
#trial:hover {
color: #d64f54;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navigationmenu">
<div class="box"></div>
<div class="nav">
<a href="http://braemo.com">
<img id='logo' src="http://images8.webydo.com/92/9273203/3958%2f4F9144FD-A273-B76D-94C9-3D8B569C8993.png">
</a>
</div>
<div class="holderrr">
<div class="rightmenu">
<a class="normalmenuitem" href='http://braemo.com/support.html'>Features</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Pricing</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Stories</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Blog</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Language</a>
<a class="normalmenuitem" href='http://braemo.com/support.html'>Support</a>
<a class="normalmenuitem" href='http://dashboard.braemo.com'>Log In</a>
<a class="rightmenu" id="trial" href='http://braemo.com/pricing.html'>Start Free Trial</a>
</div>
</div>
</div>
Your problem is that Jquery overrides the CSS, if you want your CSS to override Jquery again you have to use !important for example:
.normalmenuitem:hover {
color: #292f36 !important;
}
Here is a working example https://jsfiddle.net/jL2z8yy4/
I'm trying to make the left arrow in my page change the background color of the container on click, but whenever I click it I get this error: (index):147 Uncaught ReferenceError: slide is not defined I've tried every solution available here and still no luck. Here's the jsfiddle: https://jsfiddle.net/mLr6oax0/
I would do the following:
use element.style.backgroundColor instead of your intended element.setAttribute('style', 'background-color: 'orange')
use of addEventListener with id or class hooks over HTML's onclick
Test the solution below:
var container = document.getElementById("container");
var clickable = document.getElementById('clickable');
clickable.addEventListener('click', function () {
container.style.backgroundColor = 'orange';
});
html, body {
overflow: hidden;
margin: 0;
}
.wrapper {
margin: 0;
overflow: hidden;
}
#container {
background-color: blue;
}
.container {
position: absolute;
overflow: hidden;
margin: 0;
width: 300%;
height: 520px;
display: flex;
background-color: #ccc;
}
.flex-item {
margin-top: 10px;;
margin-right: auto;
width: 500px;
height: 500px;
background-color: #fff;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
list-style: none;
}
.flex-item:first-child {
position: absolute;
left: 0px;
margin-left: 15px;
}
.flex-item:nth-child(2) {
position: absolute;
left: 500px;
margin-left: 20px;
}
.flex-item:nth-child(3) {
position: absolute;
left: 1000px;
margin-left: 20px;
}
.flex-item:nth-child(4) {
position: absolute;
left: 1500px;
margin-left: 20px;
}
li {
display: flex;
}
.left-arrow {
position: absolute;
top: 250px;
font-size: 50px !important;
}
.right-arrow {
position: absolute;
top: 250px;
right: 0px;
font-size: 50px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<title>Flex</title>
<body>
<div class="wrapper">
<ul class="container" id="container">
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
<li class="flex-item"></li>
</ul>
<i id='clickable' class="left-arrow fa fa-chevron-left" aria-hidden="true"></i>
<i class="right-arrow fa fa-chevron-right" aria-hidden="true"></i>
</div>
</body>
Hey there :) I'm trying to make a video fit the browser window size plus adding an image at the bottom of the browser window height. So you get the video and the image to be the only thing that is showed when you load the page. When you scroll dowm the content of the website should appear.
I've made something to illustrate the idea: http://instagib.dk/JS-test/
The problem is when I start adding the content of the site, it appears under video and image. The problem seems to be I've made it absolute and out of the documents context.
Is there any JS, Jquery solution that reads the height of the absolute content and places content after the video?
Cheers:)
<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>Projects</li>
<li>Services</li>
<li>Advantages</li>
<li>Who are we</li>
<li>Work with us</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>© 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>
The 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;
}
Use the following for your content:
main{
position:absolute;
top:100%;
}
That moves the actual content below the video (assuming main is your content-element)