Develop Reference

Adding Sticky header to div elements in same page automatically

I have some long divs all in one page, each with its own style. like this:
<div class="joe">
.... (pages of text)
</div>
<div class="harry">
...(pages of text)
</div>
any way to have the classname as a sticky header when a user scrolls through the text in each div? So if a person is scrolling inside the div with class:"joe" then the word "joe" would appear at the top of the screen until the user scrolls through to the end of the div. Then it disappears until he enters the next div which would display the classname of that div.
There are many dozens of such divs with various classnames so a manual solution won't work. needs to be automatic through css and/or js.

You can consider data-attribute that you can convert to a pseudo element:
div[data-name]::before{
content:attr(data-name);
display:block;
position:sticky;
top:0;
text-align:center;
background:red;
font-size:20px;
}
body {
max-width:50%;
}
<div class="joe" data-name="joe">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>
<div class="harry" data-name="harry">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>
And you can add a small JS if you want to append automatically the data-attribute:
var all = document.querySelectorAll('div[class]');
for(var i=0;i<all.length;i++) {
all[i].setAttribute('data-name',all[i].className);
}
div[data-name]::before{
content:attr(data-name);
display:block;
position:sticky;
top:0;
text-align:center;
background:red;
font-size:20px;
margin-bottom:20px;
}
body {
max-width:50%;
}
<div class="joe" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>
<div class="harry" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at felis quis lacus fringilla suscipit vitae mollis eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus malesuada arcu efficitur, consectetur nunc nec, pulvinar odio.
Morbi tincidunt nec erat vitae luctus. Cras elit ligula, rhoncus et feugiat quis, bibendum euismod nulla. Phasellus faucibus turpis erat, non bibendum tellus laoreet at. Vestibulum aliquam blandit lobortis. Nunc varius ac risus quis pharetra. In molestie,
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
dui eu pulvinar commodo, justo metus auctor urna, vel ultrices nunc nisl in neque. Nullam at magna quis nibh lobortis euismod vel id augue. Nunc placerat sapien eget metus convallis, sed commodo dui interdum.
</div>

You need to make a header (the best way to do this is to use the new < header > tag added in HTML5) and in CSS you should add this:
header {
position: sticky;/*makes object sticky*/
top: 0;/*set header to the top of the page*/
z-index: 100;/*changes the header position to the front of the page*/
}
I hope that I helped

Get space between floating divs using JavaScript?

I got an layout using bootstrap with multiple floating divs.
I want to retrieve the space between the divs using JavaScript. Ive only no idea how i can do this. See below picture.
A picture says a 1000 words ;)
Ive created a fiddle with above layout, i will paste it here so you can play with it if you want.
.page-container {
background: #ededed;
padding: 40px 0;
}
.column {
padding: 15px;
background-color: white;
box-shadow: 1px 1px 3px #ccc;
}
[class^="col-"] {
margin-bottom: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-container">
<div class="container">
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #1
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #2
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #3
</h2>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
<p>
Fusce a velit et justo porttitor sollicitudin a a velit. Praesent ultrices arcu a sodales ultricies. Etiam cursus mattis dapibus. Fusce vulputate commodo pretium. Suspendisse a orci vitae ipsum interdum dapibus a quis velit. Proin euismod, lectus id euismod semper, tellus nunc luctus dui, consectetur venenatis erat mi eu dolor. Nunc eleifend semper lacus, at hendrerit massa. Praesent ac magna at lacus commodo faucibus eu sit amet magna. Donec pellentesque felis et leo interdum dignissim. Sed sit amet sapien ac quam auctor semper quis ut nibh. Vivamus consectetur, ipsum luctus semper viverra, sem arcu sagittis mauris, a interdum odio sapien in augue.
</p>
<p>
Nam ut bibendum urna, sed congue neque. Nunc a nunc venenatis, porttitor odio vitae, finibus est. Suspendisse quis purus a diam aliquam ullamcorper eu sed dolor. Etiam ac eros eget nisl pretium lobortis. Nulla convallis id nunc eget efficitur. Morbi vel elementum justo. Phasellus et egestas quam. Cras eu tristique urna. Cras ac justo efficitur, consectetur eros et, tincidunt nulla. Quisque et cursus ipsum. Ut tincidunt, purus et tempor fermentum, nulla diam suscipit ex, non sodales eros nunc vel ante. Duis quis justo quam. Sed imperdiet lorem et blandit pretium. Etiam elit dui, tristique et vehicula vitae, venenatis et augue.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #4
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
<p>
Curabitur quam sapien, lacinia sit amet sagittis sed, fringilla nec arcu. Morbi at velit facilisis, aliquet justo non, tincidunt mauris. Curabitur tempus ante sit amet auctor fringilla. Sed ut velit ac purus euismod placerat. Fusce ultrices feugiat tortor at condimentum. Ut eleifend eget velit at vulputate. In commodo ligula et urna ultrices, non ullamcorper est pharetra. Donec pharetra, purus a aliquam rutrum, lacus arcu porttitor nunc, eu maximus eros justo sed neque. Fusce a urna non enim lobortis venenatis. Suspendisse potenti.
</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<div class="column">
<h2>
Floating element #4
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus finibus ullamcorper commodo. Donec volutpat porttitor elit sit amet aliquet. Nam eget felis vel sapien tempus tincidunt placerat ac lectus. Donec malesuada, est ac accumsan porta, leo augue varius ante, ut cursus tortor mauris non ipsum. Vestibulum nec odio diam. Integer gravida varius risus quis euismod. Donec iaculis velit vitae semper bibendum. Donec et volutpat ligula. Sed in elit et risus facilisis maximus. Cras tempor sollicitudin velit, a mattis elit molestie non. Maecenas vitae eros in leo feugiat maximus at porttitor mauris. Vivamus vulputate tellus laoreet neque vulputate suscipit sit amet eget ipsum. Donec faucibus dignissim erat, at bibendum dui laoreet eget.
</p>
</div>
</div>
</div>
</div>
Im trying to get those pixel, and move the underlying div up using JavaScript. I know i can use something like masonry. But i can't get those working in my application.
Does anyone have an idea how i can do this? (oh, using jQuery is no problem)

Try one of:
var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;
clientHeight includes the height and vertical padding.
offsetHeight includes the height, vertical padding, and vertical borders.
scrollHeight includes the height of the contained document (would be greater than just height in case of scrolling), vertical padding, and vertical borders.
with JQuery
$('#someDiv').height();
$('#someDiv').width();

Get first element's x,y cordinates (e.g Retrieve the position (X,Y) of an HTML element)
Get first elements height and width (e.g. marco gomes answer)
Get fourth element's x,y cordinates
Calculate:
Fourth's x pos minus (First's x pos + height) = empty space's height
As it is same width as other's width, you have a width.
If you need dynamically find gaps, you can loop all divs and put them in column groups (with help of x pos). Then you do above for each group's current and next in order element (they should be in right order). If the vertical difference is above set rule, you can assume you have a gap.

How to make partial scrolling div?

I really like what Google has done here:
https://developers.google.com/kml/articles/raster
How do I make something like the top header where there is a bar that doesn't change, but the "light aqua" div scrolls up then stops to "stack" right below the "dark aqua"? Is this possible with CSS alone?

You can use jQuery to do this. Google offset().top and scrollTop() functions in jQuery. The simple logic is, as the gap between an element and the top of the document reduces and reaches 0, just set the position of the element to fixed
$(document).ready(function()
{
window.holdOffset = $('#sticky_navigation').offset().top;
$(window).scroll(function()
{
sticky_navigation();
});
});
function sticky_navigation()
{
var scroll_top = $(window).scrollTop();
if (scroll_top > holdOffset)
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
else
$('#sticky_navigation').css({ 'position': 'relative' });
};
body
{
margin:0px;
}
p
{
margin-left:100px;
margin-right:100px;
}
#my_logo
{
font-size:80px;
}
#sticky_navigation_wrapper
{
width:100%;
height:50px;
}
#sticky_navigation
{
width:100%;
height:50px;
background:black;
}
#sticky_navigation ul
{
list-style:none;
margin:0;
padding:5px;
}
#sticky_navigation ul li a
{
display:block;
float:left;
margin:0 0 0 5px;
padding:0 20px;
height:40px;
font-size:24px;
color:#ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sticky-navigation.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="demo_top_wrapper">
<div id="demo_top">
<div class="demo_container">
<div id="my_logo">Site Logo</div>
</div>
</div>
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</div>
</div>
</div>
<section id="main">
<div id="content">
<p><strong>Scroll down to see this navigation menu sticking to the top of the page.</strong></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada convallis mauris in rutrum. Suspendisse dolor lorem, consequat sit amet rutrum at, cursus ut felis. Aliquam pellentesque sodales enim. Vivamus sed adipiscing arcu. Duis tincidunt iaculis lobortis. Sed laoreet mollis tempus. Nam cursus magna in mauris pellentesque vestibulum. Ut non risus a enim pellentesque tincidunt. Maecenas vulputate dolor eu sem convallis convallis. Nulla viverra pharetra tortor, eu adipiscing risus imperdiet a. Nam eu nibh vitae diam accumsan tempus vel eget nisl. Quisque et urna lacus, a mollis ipsum.
</p>
<p>
Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
<p>
Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
</div>
</section>
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

How to make a sticky top-nav bar [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to make a navigation bar just like in W3School.
When we scroll down the nav-bar overlaps the header and when i scroll to top the header comes above the nav bar.
I tried but i cant make that thing what i want.

I've done it with a CSS class and just a little JS to trigger the class.
The idea behind it is to check the offset of the element and the current view's scroll.
CodePen example: http://codepen.io/giacomofurlan/pen/hcfkE
Extended explanation: http://giacomofurlan.name/my-experiments/how-to-fix-the-navigation-bar-to-the-top-when-it-reaches-the-position
This is the clue part, the JS controller (nav#menu is our sticky menu):
(function ($) {
"use strict";
var menuPosition = function () {
var nav = $("nav#menu"),
height = nav.height(),
windowHeight = $(window).height();
if ($(window).scrollTop() > (windowHeight - height)) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
};
menuPosition();
$(document).scroll(menuPosition);
}(jQuery));
And this is the CSS class:
.fixed {
position: fixed;
top: 0px;
}

Is this what you want? If so, then you can do that with the help of jQuery.
And google before posting anything, there are tons of tutorials out there.
$(document).ready(function()
{
window.holdOffset = $('#sticky_navigation').offset().top;
$(window).scroll(function()
{
sticky_navigation();
});
});
function sticky_navigation()
{
var scroll_top = $(window).scrollTop();
if (scroll_top > holdOffset)
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
else
$('#sticky_navigation').css({ 'position': 'relative' });
};
body
{
margin:0px;
}
p
{
margin-left:100px;
margin-right:100px;
}
#my_logo
{
font-size:80px;
}
#sticky_navigation_wrapper
{
width:100%;
height:50px;
}
#sticky_navigation
{
width:100%;
height:50px;
background:black;
}
#sticky_navigation ul
{
list-style:none;
margin:0;
padding:5px;
}
#sticky_navigation ul li a
{
display:block;
float:left;
margin:0 0 0 5px;
padding:0 20px;
height:40px;
font-size:24px;
color:#ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="demo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sticky-navigation.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="demo_top_wrapper">
<div id="demo_top">
<div class="demo_container">
<div id="my_logo">Site Logo</div>
</div>
</div>
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</div>
</div>
</div>
<section id="main">
<div id="content">
<p><strong>Scroll down to see this navigation menu sticking to the top of the page.</strong></p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada convallis mauris in rutrum. Suspendisse dolor lorem, consequat sit amet rutrum at, cursus ut felis. Aliquam pellentesque sodales enim. Vivamus sed adipiscing arcu. Duis tincidunt iaculis lobortis. Sed laoreet mollis tempus. Nam cursus magna in mauris pellentesque vestibulum. Ut non risus a enim pellentesque tincidunt. Maecenas vulputate dolor eu sem convallis convallis. Nulla viverra pharetra tortor, eu adipiscing risus imperdiet a. Nam eu nibh vitae diam accumsan tempus vel eget nisl. Quisque et urna lacus, a mollis ipsum.
</p>
<p>
Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
<p>
Mauris in augue elit, sed posuere justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lectus a eleifend tincidunt, urna sapien sodales magna, id dictum ipsum nisi non diam. Nam tempor interdum molestie. In vel sapien id augue varius adipiscing et at lectus. Ut et justo eget urna vulputate tempus in vitae est. Quisque imperdiet dapibus metus sit amet hendrerit. Proin sapien augue, suscipit quis blandit eget, pharetra eget orci. Integer massa lacus, pretium non vehicula sit amet, facilisis sed nisi. Donec ut dui et nunc volutpat laoreet ac a leo. In a dignissim dui. Phasellus pretium odio eget mi luctus a gravida nunc rutrum. Nullam nulla nisl, porta quis euismod eu, consectetur ut purus. Morbi consectetur tincidunt bibendum. Nam hendrerit tempor cursus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
<p>
Proin cursus, enim sodales elementum cursus, mi eros molestie justo, varius scelerisque ligula eros non diam. Donec malesuada, nisl vel venenatis egestas, orci dui euismod elit, facilisis vulputate arcu turpis vel tellus. Proin faucibus eleifend imperdiet. Quisque eu quam eget nunc dapibus lobortis. Aenean molestie mi et dolor lacinia id luctus ligula ultricies. Sed mauris velit, venenatis quis dapibus quis, pulvinar quis dolor. Mauris vitae lectus mi. Donec tincidunt sem eget lacus laoreet malesuada. Mauris aliquet faucibus diam, sed adipiscing metus rhoncus eu.
</p>
<p>
Sed sit amet ligula sed tellus laoreet auctor. In hac habitasse platea dictumst. Aenean at magna ut arcu vehicula euismod. Vestibulum mollis lobortis elementum. Curabitur pharetra, turpis vitae rhoncus condimentum, justo ligula condimentum nulla, non fringilla dolor felis ullamcorper velit. Nullam posuere porta enim non lacinia. Vivamus eu ipsum vel metus faucibus adipiscing sit amet sed mauris. Suspendisse mauris mauris, consectetur egestas interdum ut, blandit non magna. Proin quis gravida felis. Nunc neque lorem, facilisis nec scelerisque sed, condimentum rhoncus nunc. Aenean semper rutrum lectus vel porttitor. Vivamus sodales consectetur porttitor. Vestibulum quis rhoncus tellus. Aenean ut dignissim risus.
</p>
</div>
</section>
<script type="text/javascript" src="myscript.js"></script>
</body>
</html>

Slide Down Hidden Div On Scroll

I am trying to create a hidden div (a header) that slides down once the scroll readers a certain point. Very similar to this site.
I trying to inspect it to see how they did it, but I can't figure it out. I am not sure if they use pure CSS transitions or script. Many .js and javascripts do the opposite and have a div slide up/hide, but that isn't want I want.
I know that I have to build out two headers, one visible and one hidden. I am lost as to how to make the hidden header visible when I scroll down to 200px for example.
The HTML:
<div id="logo">
</div><!-- end logo --!>
<header>
<nav class="mainnav" role="navigation">
link
link
link
link
</nav>
<ul class="socialhead">
<li>fb</li>
<li>fb</li>
<li>fb</li>
</ul>
</header>
</div><!-- end header home --!>
<div class="header_homehidden">
<div id="logo">
</div><!-- end logo --!>
<header>
<nav class="mainnav" role="navigation">
link
link
link
link
</nav>
<ul class="socialhead">
<li>fb</li>
<li>fb</li>
<li>fb</li>
</ul>
</header>
</div><!-- end header homehidden --!>
The CSS:
.header_homehidden {
webkit-transform: translateY(-90px);
-moz-transform: translateY(-90px);
transform: translateY(-90px);
}
.header_home {
position: absolute;
z-index: 999;
color: #fff;
width: 100%;
background-color: transparent;
}
.header {
position: fixed;
top: 0px;
width: 100%;
background: white;
padding-top: 20px;
z-index: 999;
color: #000;
}
</style>
Any help is much appreciated.

HTML:
<body>
<div>
<div class="header"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus ultricies convallis. Vivamus ornare diam sit amet nisl condimentum egestas. In mi nisi, molestie vel libero nec, facilisis egestas nulla. Integer condimentum nibh vitae rutrum consectetur. Vestibulum luctus sodales risus a elementum. Suspendisse porta felis vel urna rutrum mollis. In eleifend pharetra scelerisque. Praesent pellentesque molestie eleifend. Nulla magna nibh, vehicula vitae consectetur sed, eleifend id nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec leo id magna vulputate tristique. Fusce nec neque metus. Etiam euismod, mi ac sagittis ultrices, nisl arcu ullamcorper neque, nec blandit mauris lorem non tellus. Vivamus tincidunt orci sem, facilisis dapibus velit luctus vulputate. Fusce sed nibh velit. Nullam lacinia eget felis et interdum. Ut facilisis non turpis quis dapibus. Aliquam iaculis in magna in pulvinar. Maecenas tempor tristique augue ut elementum. Nullam commodo urna a faucibus vulputate. Nam sodales nulla ac nisl iaculis laoreet. Proin turpis justo, sagittis vitae arcu et, elementum scelerisque risus. Duis vitae nunc faucibus, adipiscing metus nec, malesuada felis. Morbi ut auctor sapien. Morbi pharetra laoreet urna nec mattis. Nullam facilisis venenatis nunc, ut adipiscing sapien accumsan quis. Sed pellentesque tincidunt sapien, in consequat libero convallis sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque imperdiet sem orci, vel venenatis purus suscipit a. Ut facilisis nunc elit, quis rhoncus nunc egestas a. Ut vitae dictum massa. Curabitur nec posuere arcu. Aliquam erat volutpat. Mauris non tortor in est commodo commodo nec eget purus. Mauris enim lorem, lacinia sollicitudin libero vel, consectetur congue diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. In pharetra fringilla velit at volutpat.</div>
</div>
</body>
CSS:
body {
margin: 0px;
}
.header {
background: black;
width: 100%;
height: 50px;
position: fixed;
display: none;
}
Jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$(".header").slideDown();
}
if ($(window).scrollTop() < 100) {
$(".header").slideUp();
}
});
Fiddle:
http://jsfiddle.net/mzz2J/

Try this code:
$(function() {
var bar = $('#headerSlideContainer');
var top = bar.css('top');
$(window).scroll(function() {
if($(this).scrollTop() > 50) {
bar.stop().animate({'top' : '0px'}, 500);
} else {
bar.stop().animate({'top' : top}, 500);
}
});
});
Working Example
Source: http://return-true.com/2010/04/scroll-activated-slide-down-header-with-jquery/