I have 2 divs:
CSS
#home {
width: 1280px;
height: 1000px;
background: #000;
}
.step1 {
position: absolute;
margin-top: 100px;
margin-left: 500px;
}
.step1 a{
background: #AAF75A;
width: 100%;
line-height: 55px;
padding: 14px 49px;
text-decoration: none;
font-family: tahoma;
font-size: 20px;
}
#about {
position: absolute;
margin-left: 3000px;
width: 1280px;
height: 1000px;
background: #000;
}
HTML
<div id="home">
<article>
<div class="step1"><a class="move" href="#about">Let's go</a></div>
</article>
</div>
<div id="about">
<article>
<div class="step1"><a class="move" href="#home">Next !?</a></div>
</article>
</div>
and I want move from div id="home" to div id="about"
I have this
JS
$(function($){
$('a.move').click(function() {
var $this = $(this),
_href = $this.attr('href'),
dest = $(_href).offset().top;
$("html:not(:animated),body:not(:animated)").animate({ scrollTop: dest}, 400 );
return false;
});
});
but it just goes down ... it doesn't move to the about div
You have to scroll to the left as well. Like this:
$(function ($) {
$('a.move').click(function () {
var $this = $(this),
_href = $this.attr('href'),
destX = $(_href).offset().top;
destY = $(_href).offset().left;
$('body').animate({
scrollTop: destX,
scrollLeft: destY
}, 400);
return false;
});
});
DEMO
Related
I have a page that has a fixed menu and content box(div).
When click the menu, content box scroll to specific div.
So far so good.
This is the sample here.
https://jsfiddle.net/ezrinn/8cdjsmb9/11/
The problem is when I wrap this whole div and, make them as show/hide toggle button, the scroll is not working.
This is the sample that not working.
https://jsfiddle.net/ezrinn/8cdjsmb9/10/
Also here is the snippet
$('.btn').click(function() {
$(".wrap").toggleClass('on');
});
var div_parent_class_name;
var divs_class;
var id_offset_map = {};
$(document).ready(function() {
div_parent_class_name = "wrap_scroll";
divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
$('a').bind('click', function(e) {
e.preventDefault();
var target = $(this).attr("href")
$('.wrap_scroll').stop().animate({
scrollTop: id_offset_map[target]
}, 600, function() {
/* location.hash = target-20; */ //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(".wrap_scroll").scroll(function() {
var scrollPos = $(".wrap_scroll").scrollTop();
$("." + divs_class).each(function(i) {
var divs = $("." + divs_class);
divs.each(function(idx) {
if (scrollPos >= id_offset_map["#" + this.id]) {
$('.menu>ul>li a.active').removeClass('active');
$('.menu>ul>li a').eq(idx).addClass('active');
}
});
});
}).scroll();
body,
html {
margin: 0;
padding: 0;
height: 3000px;
}
.wrap { display:none;}
.wrap.on { display:block;}
.menu {
width: 100px;
position: fixed;
top: 40px;
left: 10px;
}
.menu a.active {
background: red
}
.wrap_scroll {
position: absolute;
top: 20px;
left: 150px;
width: 500px;
height: 500px;
overflow-y: scroll
}
#home {
background-color: #286090;
height: 200px;
}
#portfolio {
background: gray;
height: 600px;
}
#about {
background-color: blue;
height: 800px;
}
#contact {
background: yellow;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">show/hide</button>
<div class="wrap">
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a> </li>
<li>Portfolio </li>
<li>About </li>
<li>Contact </li>
</ul>a
</div>
<div class="wrap_scroll">
<div class="page-section" id="home">hh</div>
<div class="page-section" id="portfolio">pp</div>
<div class="page-section" id="about">aa</div>
<div class="page-section" id="contact">cc</div>
</div>
</div>
What Do I need to fix the code? please help.
When you calculate your offset, the div is hidden with display: none. This results in the offsets being set/calculated to zero.
Here's a quick fix I threw together: https://jsfiddle.net/hrb58zae/
Basically, moved the logic to determine offset after clicking show/hide.
var setOffset = null;
...
if (!setOffset) {
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
setOffset = true;
}
In your CSS, instead of using display: none and display: block, try using visible instead:
.wrap { visibility:hidden;}
.wrap.on { visibility:visible;}
This will hide the element without affecting the layout.
Updated fiddle: https://jsfiddle.net/a5u683es/
The problem was you are trying to update id_offset_map when content was hidden. When you use 'display:none' prop you won't get dimensions for that element and so its not working.
I updated the logic please check the fiddle https://jsfiddle.net/qfrsmnh5/
var id_offset_map = {};
var div_parent_class_name = "wrap_scroll";
var divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
function updateOffsets(){
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
}
$(document).ready(function() {
$('.btn').click(function() {
$(".wrap").toggleClass('on');
if($(".wrap").hasClass("on")){
updateOffsets();
}
});
$('a').on('click', function(e) {
e.preventDefault();
var target = $(this).attr("href")
$('.wrap_scroll').stop().animate({
scrollTop: id_offset_map[target]
}, 600, function() {
/* location.hash = target-20; */ //attach the hash (#jumptarget) to the pageurl
});
return false;
});
});
$(".wrap_scroll").on('scroll',function() {
var scrollPos = $(".wrap_scroll").scrollTop();
$("." + divs_class).each(function(i) {
var divs = $("." + divs_class);
divs.each(function(idx) {
if (scrollPos >= id_offset_map["#" + this.id]) {
$('.menu>ul>li a.active').removeClass('active');
$('.menu>ul>li a').eq(idx).addClass('active');
}
});
});
}).scroll();
body,
html {
margin: 0;
padding: 0;
height: 3000px;
}
.wrap { display:none;}
.wrap.on { display:block;}
.menu {
width: 100px;
position: fixed;
top: 40px;
left: 10px;
}
.menu a.active {
background: red;
}
.wrap_scroll {
position: absolute;
top: 20px;
left: 150px;
width: 500px;
height: 500px;
overflow-y: scroll;
}
#home {
background-color: #286090;
height: 200px;
}
#portfolio {
background: gray;
height: 600px;
}
#about {
background-color: blue;
height: 800px;
}
#contact {
background: yellow;
height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn">show/hide</button>
<div class="wrap">
<div class="menu">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Portfolio </li>
<li>About </li>
<li>Contact </li>
</ul>
</div>
<div class="wrap_scroll">
<div class="page-section" id="home">hh</div>
<div class="page-section" id="portfolio">pp</div>
<div class="page-section" id="about">aa</div>
<div class="page-section" id="contact">cc</div>
</div>
</div>
works perfectly, it's just that when you use display: none you can not do the offsetTop calculations because in fact the element is not rendered, I'm not sure if all the values give 0 or undefined, I guess undefined, a solution is always calculate Positions using a function:
var div_parent_class_name;
var divs_class;
var id_offset_map = {};
function calcTops(){
div_parent_class_name = "wrap_scroll";
divs_class = "page-section";
var scroll_divs = $("." + div_parent_class_name).children();
id_offset_map.first = 0;
scroll_divs.each(function(index) {
id_offset_map["#" + scroll_divs[index].id] = scroll_divs[index].offsetTop
});
}
https://jsfiddle.net/561oe7rb/1/
is not the optimal way, but it is to give you an idea. Sorry for my English.
Just Checkout This Working page I have designed
jQuery(document).on('scroll', function(){
onScroll();
});
jQuery(document).ready(function($) {
div_slider();
showhide();
});
/*show hide content*/
function showhide(){
$('.toggle-wrapper button').on('click', function(){
$('.wrapper').toggle();
// div_slider();
})
}
/*scrolling page on header elements click*/
function div_slider(){
$('ul li a').on('click', function(e){
e.preventDefault();
$('ul li a').removeClass('active');
$(this).addClass('active');
var attrval = $(this.getAttribute('href'));
$('html,body').stop().animate({
scrollTop: attrval.offset().top
}, 1000)
});
}
/*adding active class on header elements on page scroll*/
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('ul li a').each(function () {
var scroll_link = $(this);
var ref_scroll_Link = $(scroll_link.attr("href"));
if (ref_scroll_Link.position().top <= scrollPosition && ref_scroll_Link.position().top + ref_scroll_Link.height() > scrollPosition) {
$('ul li a').removeClass("active");
scroll_link.addClass("active");
}
else{
scroll_link.removeClass("active");
}
});
}
body {
margin: 0;
}
.toggle-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #ccd2cc;
text-align: center;
}
.toggle-wrapper button {
background-color: #ED4C67;
color: #ffffff;
padding: 10px 20px;
border: 0;
cursor: pointer;
border-radius: 5px;
}
.toggle-wrapper button:active{
background-color: #B53471;
}
header {
background-color: #6C5CE7;
position: fixed;
top: 36px;
z-index: 99;
left: 0;
right: 0;
}
header ul {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
margin: 0;
}
ul li {
flex: 1 100%;
display: flex;
justify-content: center;
}
.wrapper {
margin-top: 36px;
}
header a {
color: #ffffff;
padding: 15px;
display: block;
text-decoration: navajowhite;
text-transform: uppercase;
width: 100%;
text-align: center;
}
header a.active {
color: #000000;
background-color: #ffffff;
}
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section.section1 {
background-color: #FFEAA7;
}
section.section2{
background-color:#FAB1A0;
}
section.section3{
background-color:#7F8C8D;
}
section.section4{
background-color:#4CD137;
}
section.section5{
background-color:#A3CB38;
}
section.section6{
background-color:#70A1FF;
}
section.section7{
background-color:#079992;
}
<div class="toggle-wrapper">
<button>Toggle</button>
</div>
<div class="wrapper" style="display: none;">
<header>
<ul>
<li><a class="active" href="#one">one</a></li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
</ul>
</header>
<section class="section1" id="one">SECTION ONE</section>
<section class="section2" id="two">SECTION TWO</section>
<section class="section3" id="three">SECTION THREE</section>
<section class="section4" id="four">SECTION FOUR</section>
<section class="section5" id="five">SECTION FIVE</section>
<section class="section6" id="six">SECTION SIX</section>
<section class="section7" id="seven">SECTION SEVEN</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
So I'm making a website with a lot of Divs that take 100% height.
And I want to make a button so when it's clicked to smoothly scroll to next div.
I've coded something so when its clicked, it scrolls to specific div.
$(".next").click(function() {
$('html,body').animate({
scrollTop: $(".p2").offset().top},
'slow');
});
body{
margin: 0;
height: 100%;
}
.p1{
height: 100vh;
width: 70%;
background-color: #2196F3;
}
.p2{
height: 100vh;
width: 70%;
background-color: #E91E63;
}
.p3{
height: 100vh;
width: 70%;
background-color: #01579B;
}
.admin{
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
<div class="admin">
<button class="next">NEXT</button>
</div>
To make this work you need to identify the currently displayed div. For that you can apply a class to the element which is currently shown. Then you can use next() to traverse through them all.
Also note in the below example the addition of a common class on all elements, .p, in order to DRY up the CSS and make DOM traversal easier.
$(".next").click(function() {
var $target = $('.p.active').next('.p');
if ($target.length == 0)
$target = $('.p:first');
$('html, body').animate({
scrollTop: $target.offset().top
}, 'slow');
$('.active').removeClass('active');
$target.addClass('active');
});
body {
margin: 0;
height: 100%;
}
.p {
height: 100vh;
width: 70%;
}
.p1 {
background-color: #2196F3;
}
.p2 {
background-color: #E91E63;
}
.p3 {
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p p1 active"></div>
<div class="p p2"></div>
<div class="p p3"></div>
<div class="admin">
<button class="next">NEXT</button>
</div>
Use same class name for container.Start with first element.Each time click target the next scroller element
var f = $('.p1');
var nxt = f;
$(".next").click(function() {
if (nxt.next('.scroller').length > 0) {
nxt = nxt.next('.scroller');
} else {
nxt = f;
}
$('html,body').animate({
scrollTop: nxt.offset().top
},
'slow');
});
body {
margin: 0;
height: 100%;
}
.p1 {
height: 100vh;
width: 70%;
background-color: #2196F3;
}
.p2 {
height: 100vh;
width: 70%;
background-color: #E91E63;
}
.p3 {
height: 100vh;
width: 70%;
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1 scroller">
</div>
<div class="p2 scroller">
</div>
<div class="p3 scroller">
</div>
<div class="admin">
<button class="next">NEXT</button>
</div>
Here is a basic version that moves forward and wraps around to the beginning when it reaches the last slide. We store currSlide outside of the loop and increment the number internally in the function.
For convenience, I added a slide class to each slide which allows me to:
easily count the length of the slides
condense the CSS
let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;
$(".next").click(function() {
currSlide = currSlide === SLIDE_LENGTH ? 1 : ++currSlide;
$('html,body').animate({
scrollTop: $(`.p${currSlide}`).offset().top
},
'slow');
});
body {
margin: 0;
height: 100%;
}
/* Less repetition */
.slide {
height: 100vh;
width: 70%;
}
.p1 {
background-color: #2196F3;
}
.p2 {
background-color: #E91E63;
}
.p3 {
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>
<div class="admin">
<button class="next">NEXT</button>
</div>
jsFiddle
Bonus edit:
In case you're interested in adding a previous button at some point…
let currSlide = 1;
const SLIDE_LENGTH = $('.slide').length;
function moveSlide() {
currSlide = $(this).hasClass("next") ? ++currSlide : --currSlide;
if (currSlide < 1) {
currSlide = SLIDE_LENGTH;
}
if (currSlide > SLIDE_LENGTH) {
currSlide = 1;
}
$('html,body').animate({
scrollTop: $(`.p${currSlide}`).offset().top
},
'slow');
}
$(".prev, .next").on("click", moveSlide);
body {
margin: 0;
height: 100%;
}
/* Less repetition */
.slide {
height: 100vh;
width: 70%;
}
.p1 {
background-color: #2196F3;
}
.p2 {
background-color: #E91E63;
}
.p3 {
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slide p1"></div>
<div class="slide p2"></div>
<div class="slide p3"></div>
<div class="admin">
<button class="prev">PREVIOUS</button>
<button class="next">NEXT</button>
</div>
jsFiddle
Since your question asks "How-to in Javascript", I will answer the question in a few lines of vanilla JS:
var p = 1;
const container = document.getElementById('container');
var nextPage = function() {
var topPos = document.getElementsByClassName('page')[p++].offsetTop;
container.scrollTo({top: topPos, behavior: 'smooth'});
}
in the above example, page is the class name you assign to your divs you want to scroll to, such as:
<div id="container">
<div class="page p1"></div>
<div class="page p2"></div>
<div class="page p3"></div>
</div>
Since you want to scroll the entire browser window, you just replace
container.scrollTo({top: topPos, behavior: 'smooth'});
with
window.scrollTo({top: topPos, behavior: 'smooth'});
like so:
var p = 1;
var nextPage = function() {
var topPos = document.getElementsByClassName('page')[p++].offsetTop;
window.scrollTo({top: topPos, behavior: 'smooth'});
}
You can subtract or add the number of pixels you want to offset the topPos if it's not in the right position
Sorry in advance, beginner question here :-)
I'm trying to achieve a scrollspy effect on my nav. Basically, I just need that my link gets a red color when I scroll to the corresponding section.
I already looked and found some examples online but nothing I tried really worked out, and my JS is sloppy anyway.
Anyone could help here?
here is the full JSFiddle I have so far:
https://jsfiddle.net/Tiph/v6vtczwe/
Tahnk you so much for your time and help!
$(document).ready(function(){
//SMOOTHSCROLL
$('.nav-top a, .scrollDown').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') )
.offset().top
}, 700);
return false;
});
});
$(window).scroll(function(){
var $window =$(window);
var scroll_top = $(window).scrollTop();
console.log( $(window).scrollTop());
var position = $("section").offset().top;
var news = $("#newsSection").offset().top;
var shows = $("#showsSection").offset().top;
if (scroll_top >= news) {
$('.news').addClass("selected");
}
if (scroll_top >= shows) {
$('.shows').addClass("selected");
}
});
$('.nav-top a, .scrollDown').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href'))
.offset().top
}, 700);
return false;
});
$(window).scroll(function() {
var x = $(".nav-top").offset().top;
$("section").each(function(index) {
var z = $(this).attr("id");
if (x > $(this).offset().top && x <= $(this).offset().top + $(this).height()) {
$('a.' + z).css("color", "red");
} else {
$('a.' + z).css("color", "gray")
}
})
})
.menu > nav {
height: 50px;
position: fixed;
bottom: 0%;
width: 100%;
background-color: #393838;
opacity: 1;
padding-left: 70px;
}
.selected {
color: red
}
.nav-top {
padding: 15px 0;
background: rgb(034, 034, 034);
position: relative;
z-index: 900;
display: flex;
flex-flow: row wrap;
position: relative;
}
.nav-top a {
color: white;
text-decoration: none;
text-transform: uppercase;
font-family: 'Oswald';
font-size: 30px;
letter-spacing: 2px;
line-height: 55px;
margin-right: 30px;
transition: .6s all ease-in-out;
}
.nav-top a:hover {
color: #de031d;
transition: .3s all ease-in-out;
}
.section {
height: 600px;
}
.grey {
background-color: grey;
}
.darkGrey {
background-color: darkgrey;
}
a.newsSection{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<nav class="nav-top">
<a class="newsSection" href="#newsSection">News</a>
<a class="showsSection" href="#showsSection">Shows</a>
<a class="musicSection" href="#musicSection">Discographie</a>
<a class="mediaSection" href="#mediaSection">Medias</a>
<a class="bioSection" href="#bioSection">Bio</a>
</nav>
</div>
<section id="newsSection" class="section grey">
first section
</section>
<section id="showsSection" class="section darkGrey">
second section
</section>
<section id="musicSection" class="section grey">
third section
</section>
<section id="mediaSection" class="section darkGrey">
fourth section
</section>
<section id="bioSection" class="section grey">
fifth section
</section>
I need to change the scroll speed of two divs (out of 5 divs).
I found how to change it for the whole document: http://jsfiddle.net/36dp03ur/
But what I need is something like this:
<div id="1"> //scrolls normally
...
</div>
<div id="2"> //scrolls slower
...
</div>
<div id="3"> //scrolls normally
...
</div>
and so on
Check this code out:
$.fn.moveIt = function(){
var $window = $(window);
var instances = [];
$(this).each(function(){
instances.push(new moveItItem($(this)));
});
window.onscroll = function(){
var scrollTop = $window.scrollTop();
instances.forEach(function(inst){
inst.update(scrollTop);
});
}
}
var moveItItem = function(el){
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop){
var pos = scrollTop / this.speed;
this.el.css('transform', 'translateY(' + -pos + 'px)');
};
$(function(){
$('[data-scroll-speed]').moveIt();
});
.content {
height: 3000px;
}
.wrapper {
position: fixed;
}
.wrapper .box {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 160%;
color: #fff;
position: absolute;
background: #ff8330;
}
.wrapper .box:nth-of-type(2) {
left: 100px;
background: #E01B5D;
}
.wrapper .box:nth-of-type(3) {
left: 200px;
background: #30FFFF;
}
.wrapper .box:nth-of-type(4) {
left: 300px;
background: #B3FF30;
}
.wrapper .box:nth-of-type(5) {
left: 400px;
background: #308AFF;
}
.wrapper .box:nth-of-type(6) {
left: 500px;
background: #1BE059;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="wrapper">
<div class="box" data-scroll-speed="2">S</div>
<div class="box" data-scroll-speed="3">C</div>
<div class="box" data-scroll-speed="6">R</div>
<div class="box" data-scroll-speed="5">O</div>
<div class="box" data-scroll-speed="9">L</div>
<div class="box" data-scroll-speed="4">L</div>
</div>
</div>
I have a fixed header and menu bar and there is a container div when i scroll down the container div does not hide itself below the menu bar as shown in image below is the jquery code i am using. Please help to solve my issue.
var header= $('.header');
var start_div = $(header).offset().top;
var menu_div = $('.menu');
var menu = $(menu_div ).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(header).css('position',((p)>start_div ) ? 'fixed' : 'static');
$(header).css('top',((p)>start_div ) ? '0px' : '');
$(header).css('width','840px');
$(header).css('min-height','108px');
});
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop()+100;
$(menu_div).css('position',((p)>menu) ? 'fixed' : 'static');
$(menu_div).css('top',((p)>menu) ? '110px' : '');
$(menu_div).css('width','575px');
$(menu_div).css('height','57px');
});
Unless I'm missing something you don't need jQuery or even JS to do that.
Check the snippet (codePen here)
html,
body {
width: 100%;
height: 100%;
background-color: white;
}
.header-wrapper {
top: 0;
right: 0;
left: 0;
position: fixed;
height: 160px;
background-color: white;
}
.header {
background-color: cyan;
height: 100px;
width: 100%;
}
.menu {
width: 100%;
height: 50px;
background-color: green;
margin-top: 10px;
}
.content {
color: #fff;
background-color: black;
margin-top: 170px; /* same as height of header + nav + margins + 10px for coolness*/
}
<body>
<div class="header-wrapper">
<div class="header">Blue Header</div>
<div class="menu">Green Menu</div>
</div>
<div class="content">
My content<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
blabla
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
Use the css z-index property.
.header, .menu {
z-index: 2
}
.container {
z-index: 1
}
http://www.w3schools.com/cssref/pr_pos_z-index.asp