jQuery execute scroll conditional only at desktop screen width

jQuery execute scroll conditional only at desktop screen width - javascript

I am having real difficulty getting a jQuery show/hide on scroll to run only on desktop viewports.
Try as I might, I cannot get the hide function to cease working once the screen is mobile.
I have already tried writing the function utilising using a CSS media query so that it only works in the presence of a display: none, building on #Andrews comment below.
I can't simply use show/hide via a media query as suggested in comments. Because I need the two variations of the desktop header.
$(document).ready(function () {
$(window).scroll( function() {
if( $(this).scrollTop() > 0 ) {
$(".middle-tier, .top-tier-menu-bar ").hide();}
else {$(".middle-tier, .top-tier-menu-bar").show();}
});
});
.placeholder-style{
background-color: lightblue;
border: 2px solid blue;
padding: .3em;
text-align: center;
margin: .5em;
}
.logo{
width: 100px;
}
.top-tier-menu-bar{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.mobile-nav-extra-widgets{
display: flex;
flex-direction: column;
align-items: flex-start;
}
.middle-tier{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.right-icons{
display: flex;
flex-direction: row;
justify-content:space-around;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
li {
display: inline;
padding: 2em;
}
.header{
position: sticky;
overflow: hidden;
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
background-color: aliceblue;
}
.page-contents{margin-top:250px;}
#media (min-width:500px) {
.header{position:fixed;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class = "header">
<!--Top tier menu starts-->
<div class="top-tier-menu-bar">
<div class="trust-pilot-widget placeholder-style">
<span>TrustPilot Widget</span>
</div>
<div class="click-to-call placeholder-style">
<span>Phone number</span>
</div>
</div>
<div class = "middle-tier">
<div class ="search-icon placeholder-style">Search</div>
<div class = "central-logo placeholder-style logo">Logo</div>
<div class ="right-icons placeholder-style">
<div class = "user placeholder-style">User</div>
<div class = "cart placeholder-style">Cart</div>
</div>
</div>
<div class="nav">
<ul class="placeholder-style">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
</div>
</div>
<div class="page-contents">
<div id="mobile-viewport-detect">test</div>
<p class="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
<p class="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
<p class="placeholder-style" style="placeholder-style">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu feugiat pretium nibh ipsum consequat nisl vel. Sed elementum tempus egestas sed sed risus. Arcu dictum varius duis at consectetur lorem donec massa sapien. Quis blandit turpis cursus in hac habitasse platea dictumst. Est lorem ipsum dolor sit amet consectetur. Nibh tortor id aliquet lectus proin nibh nisl condimentum id. Sed nisi lacus sed viverra tellus in hac habitasse. Congue eu consequat ac felis donec. Nunc sed id semper risus in hendrerit gravida. Felis imperdiet proin fermentum leo vel. Eu consequat ac felis donec et odio pellentesque. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Consectetur a erat nam at lectus urna duis convallis. Auctor eu augue ut lectus arcu bibendum at varius. Quam lacus suspendisse faucibus interdum posuere. In hendrerit gravida rutrum quisque non tellus. Euismod in pellentesque massa placerat duis ultricies. Pellentesque elit eget gravida cum sociis natoque.</p>
<p class="placeholder-style">Etiam tempor orci eu lobortis. Mattis pellentesque id nibh tortor id aliquet lectus proin. Eu nisl nunc mi ipsum faucibus vitae aliquet nec. Elit eget gravida cum sociis natoque penatibus et magnis. Risus quis varius quam quisque. Suspendisse in est ante in nibh. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Risus pretium quam vulputate dignissim suspendisse in est ante in. </p>
<p class="placeholder-style">Commodo elit at imperdiet dui. Facilisis magna etiam tempor orci eu lobortis. Tellus integer feugiat scelerisque varius morbi enim nunc. Sed odio morbi quis commodo odio aenean. Ultrices sagittis orci a scelerisque. Placerat orci nulla pellentesque dignissim enim sit amet venenatis. Ipsum dolor sit amet consectetur adipiscing elit ut. </p>
</div>
</body>
I have now made a fiddle to fully demonstrate the context and how it is working currently. Would really appreciate a tip here.
Thank you friends.

Related

Resizable Panels (L/TR/BR) using jQuery resizable - problem getting it to work

I'm trying to get a three panel layout (Left/Top-Right/Bottom-Right) using jQuery resizable so that I can have the user move the horizontal and vertical splitter/dividers.
I have got a certain amount of the way (see the code below/linked) - but I can't seem to get close enough.
I've looked at the https://api.jqueryui.com/resizable/ documentation - but this is of no help. I've also looked (and continue to look) at http://layout.jquery-dev.com/demos.cfm - but it's not obvious what js is actually required in these (not a very clever move for documentation!)
Where am I going wrong?
Can it be done with just jquery/jquery-ui or do I need another library?
$(function() {
$("#left-container").resizable({
handles: {
e: "#horizontalHandle"
},
resize: function(e, ui) {
$("#right-container").width(
$("#container").width() -
ui.size.width - 20 -
parseInt($("#right-container").css("margin-left")) -
parseInt($("#right-container").css("margin-right")) -
parseInt($("#right-container").css("padding-left")) -
parseInt($("#right-container").css("padding-right")));
}
});
$("#right-container").resizable({
handles: {
s: "#verticalHandle"
},
resize: function(e, ui) {
$("#right-bottom").height($("#container").height() -
ui.size.height - 10 -
parseInt($("#right-top").css("margin-top")) -
parseInt($("#right-top").css("margin-bottom")) -
parseInt($("#right-top").css("padding-top")) -
parseInt($("#right-top").css("padding-bottom")));
}
});
});
#container,
#left,
#right-container,
#horizontalHandle {
height: calc(100vh - 120px);
}
#container {
width: 100vw;
overflow: hidden;
font-family: Lucida Console, Courier New, system-ui, Trebuchet MS, Tahoma, Arial Narrow, Century Gothic, Verdana, sans-serif;
font-size: 9pt;
line-height: 16px;
margin-bottom: 30px;
}
#left,
#right-container,
#horizontalHandle {
position: absolute;
top: 30px;
}
#left,
#right-container {
padding: 10px;
margin: 0;
color: black;
overflow: auto;
}
#left-container {
position: absolute;
width: 25%;
left: 0;
top: 0;
}
#horizontalHandle {
width: 3px;
background: red;
right: 3px;
z-index: 2;
}
#left {
left: 0;
width: calc(100% - 5px);
padding-right: 0;
background-color: lightgray;
}
#right-container {
right: 1px;
width: 75%;
xmargin-left: 10px;
background-color: #f5f5f5;
white-space: nowrap;
}
#right-top {
background-color: lightgrey;
height: 10%;
white-space: normal;
}
#verticalHandle {
height: 3px;
background: red;
bottom: 3px;
z-index: 2;
}
#right-bottom {
background-color: #f3f0f0;
height: 90%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" ></script><div>
<div id='container'>
<div id='left-container'>
<div id='horizontalHandle' class='ui-resizable-handle ui-resizable-e'></div>
<div id='left'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.'
+'Consectetur lorem donec massa sapien. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla est ullamcorper eget nulla. Sagittis id consectetur purus ut faucibus. Consequat ac felis donec et. Tellus orci ac auctor augue mauris augue neque gravida. Ut pharetra sit amet aliquam. A diam maecenas sed enim ut. Cras pulvinar mattis nunc sed blandit libero. Facilisi nullam vehicula ipsum a. Viverra tellus in hac habitasse.'
+'Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tellus at urna condimentum mattis pellentesque id nibh. Lorem donec massa sapien faucibus et molestie ac. Aliquam malesuada bibendum arcu vitae. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Pharetra vel turpis nunc eget. Vitae elementum curabitur vitae nunc. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Enim ut sem viverra aliquet eget sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Amet massa vitae tortor condimentum lacinia quis vel. Erat pellentesque adipiscing commodo elit at imperdiet. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. A iaculis at erat pellentesque adipiscing. Porta lorem mollis aliquam ut porttitor leo.'
+'Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Bibendum neque egestas congue quisque. Adipiscing vitae proin sagittis nisl rhoncus mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sodales ut eu sem integer. Accumsan lacus vel facilisis volutpat. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna. Amet facilisis magna etiam tempor orci eu.'
+'Fusce ut placerat orci nulla. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Platea dictumst quisque sagittis purus sit amet volutpat. </div>
</div>
<div id='right-container'>
<div id='right-top'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.'
+'Consectetur lorem donec massa sapien. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla est ullamcorper eget nulla. Sagittis id consectetur purus ut faucibus. Consequat ac felis donec et. Tellus orci ac auctor augue mauris augue neque gravida. Ut pharetra sit amet aliquam. A diam maecenas sed enim ut. Cras pulvinar mattis nunc sed blandit libero. Facilisi nullam vehicula ipsum a. Viverra tellus in hac habitasse.'
+'Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tellus at urna condimentum mattis pellentesque id nibh. Lorem donec massa sapien faucibus et molestie ac. Aliquam malesuada bibendum arcu vitae. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Pharetra vel turpis nunc eget. Vitae elementum curabitur vitae nunc. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Enim ut sem viverra aliquet eget sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Amet massa vitae tortor condimentum lacinia quis vel. Erat pellentesque adipiscing commodo elit at imperdiet. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. A iaculis at erat pellentesque adipiscing. Porta lorem mollis aliquam ut porttitor leo.'
+'Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Bibendum neque egestas congue quisque. Adipiscing vitae proin sagittis nisl rhoncus mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sodales ut eu sem integer. Accumsan lacus vel facilisis volutpat. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna. Amet facilisis magna etiam tempor orci eu.'
+'Fusce ut placerat orci nulla. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Platea dictumst quisque sagittis purus sit amet volutpat. </div>
<div id='verticalHandle' class='ui-resizable-handle ui-resizable-s'></div>
<div id='right-bottom'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.'
+'Consectetur lorem donec massa sapien. Quis imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla est ullamcorper eget nulla. Sagittis id consectetur purus ut faucibus. Consequat ac felis donec et. Tellus orci ac auctor augue mauris augue neque gravida. Ut pharetra sit amet aliquam. A diam maecenas sed enim ut. Cras pulvinar mattis nunc sed blandit libero. Facilisi nullam vehicula ipsum a. Viverra tellus in hac habitasse.'
+'Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tellus at urna condimentum mattis pellentesque id nibh. Lorem donec massa sapien faucibus et molestie ac. Aliquam malesuada bibendum arcu vitae. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Pharetra vel turpis nunc eget. Vitae elementum curabitur vitae nunc. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Enim ut sem viverra aliquet eget sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Amet massa vitae tortor condimentum lacinia quis vel. Erat pellentesque adipiscing commodo elit at imperdiet. Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. A iaculis at erat pellentesque adipiscing. Porta lorem mollis aliquam ut porttitor leo.'
+'Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Bibendum neque egestas congue quisque. Adipiscing vitae proin sagittis nisl rhoncus mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sodales ut eu sem integer. Accumsan lacus vel facilisis volutpat. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna. Amet facilisis magna etiam tempor orci eu.'
+'Fusce ut placerat orci nulla. Suscipit adipiscing bibendum est ultricies integer quis auctor elit sed. Platea dictumst quisque sagittis purus sit amet volutpat. </div>
</div>
</div>
</div>
(Note, I don't know why the stackoverflow code runner doesn't work - but see https://jsfiddle.net/Abeeee/57ofh1gq/20/ for a running version)
Note:
I need to include content scrollbars where applicable
I need to handle window resize
I need the resize handles to sit to the right/bottom of the scrollbars when they are visible
Would also like to memorize the layout for use next time the screen is refreshed
Surely this should be something out of the box but it seems elusive.

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>

Bootstrap 3: Auto-clip affixed side-nav

I've been playing around with this for some time but couldn't manage to get it working or find a similar question here.
Here is the fiddle.
We have an affixed side navigation containing a variable number of links. When the number of links get big, the side-nav goes beyond the available height. I would like to clip it off vertically based on available height (excluding the footer when it is in the view). I mean a scroll-bar should appear when the items are clipped.
Has anyone worked on a similar issue? I would really appreciate if you share your experience. And please let me know if it's not a reasonable design :)
I include some code here to make s.o. happy:
HTML:
<!-- Main Content -->
<div id="main-content" class="col-xs-9">
<h2>Heading<a id="1"></a></h2>
<p>Lorem ipsum ...</p>
<h2>Heading<a id="2"></a></h2>
<p>Lorem ipsum ...</p>
</div>
<!-- Sidebar -->
<div id="sidebar" class="col-xs-3">
<div id="sidenav" role="navigation">
<h3>Contents</h3>
<ul class="nav nav-pills nav-stacked">
<li><a class="list-group-item" href="#1">Heading</a></li>
<li><a class="list-group-item" href="#2">Heading</a></li>
</ul>
</div>
</div>
JS:
// activate scrollspy and affix for sidenav
$('body').scrollspy({ target: '#sidenav' });
$('#sidenav').affix({
offset: {
top: 165
}
})
CSS:
#sidenav.affix {
top: 50px;
z-index: 1;
width: 212.5px;
}
#sidenav {
margin-bottom: 20px;
}

Tricky because the element is position fixed. Try modifying your .affix class:
#sidenav.affix {
top: 50px;
z-index: 1;
width: 212.5px;
bottom: 0; /* <-- add */
overflow: auto; /* <-- add */
}
Example:
/* Latest compiled and minified JavaScript included as External Resource */
// activate scrollspy and affix for sidenav
$('body').scrollspy({
target: '#sidenav'
});
$('#sidenav').affix({
offset: {
top: 165
}
})
// smooth scrolling
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 800);
return false;
}
}
});
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
html,
body {
height: 100%;
}
body {
padding-top: 50px;
}
footer {
margin: 50px 0;
}
h2 {
margin-top: 60px;
}
/* side navigation */
/* media queries that make the side nav position static have been removed for easier editing in jsfiddle */
#sidenav.affix {
top: 50px;
z-index: 1;
width: 212.5px;
bottom: 0;
overflow: auto;
}
#sidenav {
margin-bottom: 20px;
}
.nav-stacked>li+li {
margin-top: 0;
}
.nav-stacked>li>a {
border-radius: 0 !important;
margin-top: -1px;
}
.nav-stacked>li:first-child>a {
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.nav-stacked>li:last-child>a {
margin-bottom: 0 !important;
border-bottom-right-radius: 4px !important;
border-bottom-left-radius: 4px !important;
}
/* fix problem with anchors going behind top navbar */
#main-content h2 a {
display: block;
position: relative;
top: -100px;
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<!-- Side-nav comes after the main content -->
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" href="index.html">We have a nav bar also!</a>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading/Breadcrumbs -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Test Page
</h1>
<ol class="breadcrumb">
<li>Home
</li>
<li class="active">Test Page</li>
</ol>
</div>
</div>
<!-- /.row -->
<!-- Content Row -->
<div class="row">
<div class="col-lg-12">
<!-- Main Content -->
<div id="main-content" class="col-xs-9">
<h2>Heading<a id="1"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="2"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="3"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="4"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="5"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="6"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="7"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="8"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="9"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="10"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="11"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="12"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="13"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="14"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="15"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="16"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="17"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="18"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="19"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
<h2>Heading<a id="20"></a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam egestas congue nibh, vel dictum ante posuere vitae. Cras gravida massa tempor metus eleifend sed elementum tortor scelerisque. Vivamus egestas, tortor quis luctus tristique, sem velit
adipiscing risus, et tempus enim felis in massa. Morbi viverra, nisl quis rhoncus imperdiet, turpis massa vestibulum turpis, egestas faucibus nibh metus vel nunc. In hac habitasse platea dictumst. Nunc sit amet nisi quis ipsum tincidunt semper.
Donec ac urna enim, et placerat arcu. Morbi eu laoreet justo. Nullam nec velit eu neque mattis pulvinar sed non libero. Sed sed vulputate erat. Fusce sit amet dui nibh.</p>
</div>
<!-- /.col-md-9 -->
<!-- Sidebar -->
<div id="sidebar" class="col-xs-3">
<div id="sidenav" role="navigation">
<h3>Contents</h3>
<ul class="nav nav-pills nav-stacked">
<li><a class="list-group-item" href="#1">Heading</a>
</li>
<li><a class="list-group-item" href="#2">Heading</a>
</li>
<li><a class="list-group-item" href="#3">Heading</a>
</li>
<li><a class="list-group-item" href="#4">Heading</a>
</li>
<li><a class="list-group-item" href="#5">Heading</a>
</li>
<li><a class="list-group-item" href="#6">Heading</a>
</li>
<li><a class="list-group-item" href="#7">Heading</a>
</li>
<li><a class="list-group-item" href="#8">Heading</a>
</li>
<li><a class="list-group-item" href="#9">Heading</a>
</li>
<li><a class="list-group-item" href="#10">Heading</a>
</li>
<li><a class="list-group-item" href="#11">Heading</a>
</li>
<li><a class="list-group-item" href="#12">Heading</a>
</li>
<li><a class="list-group-item" href="#13">Heading</a>
</li>
<li><a class="list-group-item" href="#14">Heading</a>
</li>
<li><a class="list-group-item" href="#15">Heading</a>
</li>
<li><a class="list-group-item" href="#16">Heading</a>
</li>
<li><a class="list-group-item" href="#17">Heading</a>
</li>
<li><a class="list-group-item" href="#18">Heading</a>
</li>
<li><a class="list-group-item" href="#19">Heading</a>
</li>
<li><a class="list-group-item" href="#20">Heading</a>
</li>
</ul>
</div>
</div>
<!-- /.col-md-3 -->
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer id="footer">
<div class="row">
<div class="col-lg-12">
<p>Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer
Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer Footer</p>
</div>
</div>
</footer>
</div>

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/

Develop Reference

JavaScript is the programming language of the Web.