Related
I currently have a div with a list of text and a button that adds more lines of text. Once the lines of text reach the bottom of the screen the scrollbar appears. I would like the scrollbar the appear transparent and on top of the div rather than fully opaque and next to the div how it is currently. Is there any way to do this?
I used overflow:overlay; to display scrollbar over content and background-color on the thumb and track to make them 25% opaque. Please see snippet below :
div{
height:100px;
background-color:lightblue;
overflow:overlay;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #00000025 #ffffff25;
}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
background: #ffffff25;
}
*::-webkit-scrollbar-thumb {
background-color: #00000025;
border-radius: 10px;
border: 3px none #00000025;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum luctus scelerisque facilisis. Etiam vestibulum neque at ornare lacinia. Phasellus malesuada massa vel dapibus volutpat. Donec elit metus, mollis id egestas vel, mattis et felis. Duis rutrum diam eu lacus molestie mollis. Phasellus interdum imperdiet vehicula. Morbi eget ex massa.
Curabitur interdum semper mauris non efficitur. Ut eros ipsum, blandit sit amet hendrerit sed, tincidunt nec est. Duis finibus posuere orci sit amet semper. Ut quis ligula nec purus elementum accumsan quis id felis. Sed eget imperdiet dui. Suspendisse faucibus porttitor massa. Proin auctor, libero ut pharetra ullamcorper, arcu enim lobortis tellus, in mollis mi turpis vitae nibh. Pellentesque eget neque pharetra, ornare diam quis, vehicula risus. Phasellus pellentesque facilisis enim, vitae elementum augue. Phasellus ac vulputate nunc. Morbi non ante gravida, mattis nisi eu, ullamcorper sem. Nullam egestas ligula ut lectus dapibus vehicula. In in erat viverra, sagittis odio a, venenatis erat. Nunc ut nunc scelerisque, egestas sapien sed, venenatis lorem. Vivamus fringilla nunc leo, in dictum tortor vehicula vitae.
Donec eleifend est in felis molestie convallis. Etiam dolor ligula, lobortis eu molestie feugiat, aliquam eget ligula. Quisque tempor ornare enim, sed varius mi vestibulum sit amet. In at vestibulum ligula. Vivamus pretium non purus vel scelerisque. Pellentesque a mauris sit amet orci lobortis pellentesque. In purus nulla, maximus non sapien vitae, rhoncus tristique arcu. In placerat dui vel iaculis commodo. Nullam malesuada suscipit nulla, at scelerisque tortor vulputate at. In a diam at libero cursus bibendum in vitae libero. In tortor magna, ornare nec massa vitae, sagittis tincidunt turpis.
Proin malesuada in lectus vitae suscipit. Sed nibh risus, accumsan vel enim vel, mattis porta augue. Aliquam et lacinia neque. Etiam pellentesque tempor augue eget ullamcorper. Aenean dictum efficitur dolor sed ultrices. Donec vitae euismod odio. Nam quis posuere ante. Fusce quis sagittis nulla, sit amet gravida urna. Nulla facilisi. Vivamus id auctor mi. Curabitur pellentesque risus et tortor viverra, vitae pretium ex fringilla. Mauris efficitur maximus lorem vitae hendrerit. Cras efficitur sollicitudin sapien sed dignissim. Duis fermentum imperdiet tincidunt. Praesent augue justo, elementum eu pharetra in, iaculis quis ipsum. Donec sit amet varius arcu, in dictum risus.
Ut ex urna, scelerisque quis augue a, viverra bibendum ligula. Aliquam iaculis dolor quis dolor finibus consectetur. Integer vehicula, turpis sed sollicitudin cursus, est justo posuere elit, non facilisis massa nulla id ligula. Duis tempus, sem vel congue scelerisque, augue mauris efficitur tortor, nec commodo magna sapien et eros. Donec ultrices dui mi, ut malesuada odio ornare a. Duis auctor, ex eu ultricies semper, leo diam consequat turpis, eu ornare felis velit rhoncus quam. Vestibulum lacinia ipsum nec ipsum laoreet faucibus. Mauris sed eros sem. Morbi a tellus quam. Nulla porttitor scelerisque massa eu efficitur. In metus libero, viverra fermentum accumsan et, tristique a ipsum. Proin lacinia tortor leo, facilisis volutpat ante elementum vel. Pellentesque sed ipsum ut sem lobortis mollis sed sit amet dolor. Pellentesque vulputate, justo id eleifend congue, felis enim consectetur nibh, id malesuada ipsum enim nec lectus.
</div>
How to I make a Design a scrollbar using html, css or javascript?
What I dont want
I dont want to edit the current the scrollbar for my browser.
What I do Want
I want to make my own scrollbar for my companies website.
https://keenthemes.com/metronic/preview/?demo=demo4
"Code"
I dont know how to even start building this but ill do my best!
Html
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div>
</section>
!important
That just an example of what I wnat I know if this is you you build it professionally.
Please help and Thank you in advance.
Here is a simple example of what you can do with -webkit-scrollbar
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
/* Scrollbar */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track-piece {
background-color: #ddd;
}
*::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 6px;
border-style: none;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<!--div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div-->
</section>
I hope it helps.
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
These are the elements you're looking for. CSS-Tricks has some excellent examples outlined and what you're trying to achieve here isn't very specific, but if you clarify the kind of styles you're going for I'd be happy to edit my answer a bit to accommodate!
As well here's a CodePen with some pretty clean options so you can compare and see how the styoes react.
Hope this helps!
For browser's that don't use webkit as a render engine, you just want to add it's alternative.
Or simply use a plug-in. I found this megathread with every bit of information you will likely ever need on the topic.
https://stackoverflow.com/a/14150577/5860648
I have created a demo on CodePen. where you click on a box then the content for the box shows up and the window scrolls down to it. Then you can close it by clicking a box in the bottom corner. The problem is that when I click the main box a second time the window scrolls to the top of the page. Why is this happening? also is there a shorter way to write this code?
https://codepen.io/Reece_Dev/pen/NjQvdv
$(document).ready(function(){
$("#link_1").click(function(){
$("#cont_1").toggleClass('show');
$('html, body').animate({
scrollTop: $("#cont_1").offset().top
}, 500);
$("#close_btn1").click(function(){
$("#cont_1").removeClass('show');
$('html, body').animate({
scrollTop: $("#link_1").offset().top
}, 500);
});
});
$("#link_2").click(function(){
$("#cont_2").toggleClass('show');
$('html, body').animate({
scrollTop: $("#cont_2").offset().top
}, 500);
$("#close_btn2").click(function(){
$("#cont_2").removeClass('show');
$('html, body').animate({
scrollTop: $("#link_2").offset().top
}, 500);
});
});
$("#link_3").click(function(){
$("#cont_3").toggleClass('show');
$('html, body').animate({
scrollTop: $("#cont_3").offset().top
}, 500);
$("#close_btn3").click(function(){
$("#cont_3").removeClass('show');
$('html, body').animate({
scrollTop: $("#link_3").offset().top
}, 500);
});
});
$("#link_4").click(function(){
$("#cont_4").toggleClass('show');
$('html, body').animate({
scrollTop: $("#cont_4").offset().top
}, 500);
$("#close_btn4").click(function(){
$("#cont_4").removeClass('show');
$('html, body').animate({
scrollTop: $("#link_4").offset().top
}, 500);
});
});
});
*{
margin: 0;
padding: 0;
}
body{
height: 5000px;
}
#head{
height: 600px;
}
#link_cont{
text-align: center;
font-size: 0;
}
.links{
cursor: pointer;
display: inline-block;
height: 500px;
width: 25%;
}
#link_1{
background-color: blue;
}
#link_2{
background-color: red;
}
#link_3{
background-color: yellow;
}
#link_4{
background-color: pink;
}
#cont_1 p{
background-color: lightblue;
}
#cont_2 p{
background-color: tomato;
}
#cont_3 p{
background-color: lightyellow;
}
#cont_4 p{
background-color: lightpink;
}
.hide{
display: none;
position: relative;
}
.show{
display: block;
}
.close{
pointer: cursor;
width: 50px;
height: 50px;
position: absolute;
right: 0;
bottom: 0;
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="head"></div>
<div id="link_cont">
<div class="links" id="link_1"></div>
<div class="links" id="link_2"></div>
<div class="links" id="link_3"></div>
<div class="links" id="link_4"></div>
</div>
<div id="cont_1" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn1"></div>
</div>
<div id="cont_2" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn2"></div>
</div>
<div id="cont_3" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn3"></div>
</div>
<div id="cont_4" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn4"></div>
</div>
Hopefully this should do what you want. I have cleaned up the code by targeting the classes wrather than the IDs. I have added a data-target attribute to the links, so I can target the relevant content in the jQuery code. If you are using an a tag that will cause the window to jump to the top, so I have added e.preventDefault() to each of the click events to prevent that happening.
EDIT: I have added an additional scroll if you click one of the boxes while it is open. Hopefully that should force it to top scroll to the top of the page.
$(document).ready(function(){
$(".links").click(function(e){
// Add e.preventDefault() in case you are using a tags in your actual code, because if you are this will prevent the page jumping to the top.
e.preventDefault();
// store the clicked data-target attribute
var target = $(this).attr('data-target');
// select the relevant content and store in variable
target = $('#' + target);
target.toggleClass('show');
// check if target content is visible after class toggle
if(target.hasClass('show')) {
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 500);
} else {
$('html, body').stop().animate({
scrollTop: $(this).offset().top
}, 500);
}
// If it was working for you better before, just remove the if statement above and un-comment the below code
// $('html, body').stop().animate({
// scrollTop: target.offset().top
// }, 500);
});
$('.close').click(function(e){
e.preventDefault();
// store the content wrapper element in a variable
var parent = $(this).parent();
// store the parent wrappers ID in a variable
var target = parent.attr('id');
// target the relevent link by it's data-target attribute
target = $('[data-target="' + target + '"]');
parent.removeClass('show');
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 500);
});
});
*{
margin: 0;
padding: 0;
}
body{
height: 5000px;
}
#head{
height: 600px;
}
#link_cont{
text-align: center;
font-size: 0;
}
.links{
cursor: pointer;
display: inline-block;
height: 500px;
width: 25%;
}
#link_1{
background-color: blue;
}
#link_2{
background-color: red;
}
#link_3{
background-color: yellow;
}
#link_4{
background-color: pink;
}
#cont_1 p{
background-color: lightblue;
}
#cont_2 p{
background-color: tomato;
}
#cont_3 p{
background-color: lightyellow;
}
#cont_4 p{
background-color: lightpink;
}
.hide{
display: none;
position: relative;
}
.show{
display: block;
}
.close{
pointer: cursor;
width: 50px;
height: 50px;
position: absolute;
right: 0;
bottom: 0;
background-color: black;
}
<div id="head"></div>
<div id="link_cont">
<!-- I have added a data-target attribute to the link divs to let the jQuery code know what content to target -->
<div class="links" id="link_1" data-target="cont_1"></div>
<div class="links" id="link_2" data-target="cont_2"></div>
<div class="links" id="link_3" data-target="cont_3"></div>
<div class="links" id="link_4" data-target="cont_4"></div>
</div>
<div id="cont_1" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn1"></div>
</div>
<div id="cont_2" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn2"></div>
</div>
<div id="cont_3" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn3"></div>
</div>
<div id="cont_4" class="hide">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed suscipit felis. Phasellus aliquet est at rhoncus condimentum. Pellentesque eu fermentum metus. Vestibulum dignissim, libero vitae rhoncus porta, massa turpis ultricies lectus, et aliquet felis eros sit amet dui. Morbi at nisi tincidunt, eleifend leo quis, congue felis. Vestibulum nec nisl at nibh pretium pretium. Phasellus ultricies diam sed sem vulputate hendrerit. Donec lacinia ac mi ac lacinia. Pellentesque fermentum quam in pulvinar sollicitudin. Phasellus a feugiat massa. Etiam purus felis, ultricies eget lorem vitae, commodo posuere lacus.
Ut ligula nibh, scelerisque at consequat quis, fermentum vel lacus. Nam cursus tortor quis nibh ultricies semper. Pellentesque placerat quam rutrum tristique auctor. Nam gravida purus non velit tempus finibus. Donec lacinia a enim vel facilisis. Phasellus quis dictum urna. Curabitur id eleifend nisl, eu luctus ante. Nunc vestibulum eros a mauris mollis venenatis. Sed eu enim et libero aliquet volutpat sed eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Sed bibendum felis nulla. Aenean eleifend nisl massa. Quisque pretium, erat et molestie porttitor, turpis mi dapibus eros, eget eleifend est diam eget velit. Quisque non ex eros. Etiam egestas tortor felis. Sed et arcu dui. Nullam eros mi, sagittis sed venenatis sit amet, pretium at mauris. Aenean maximus tincidunt tortor. Vestibulum elit diam, aliquet a luctus sit amet, sagittis at lectus. Integer dictum non tellus id imperdiet. Maecenas tempor orci vitae consectetur tincidunt. Pellentesque commodo, magna in auctor ultrices, augue risus cursus massa, in vestibulum justo dui et nulla. Aenean congue turpis quis nisi maximus ultricies. Sed scelerisque lectus eget mollis sodales. Phasellus a dapibus sem. Etiam commodo faucibus vulputate.
Ut iaculis, orci sit amet varius finibus, turpis urna egestas nulla, non sollicitudin nisl felis ut nisl. Aenean gravida enim eget tempor ultrices. Suspendisse quam turpis, efficitur eu facilisis id, fermentum vitae turpis. Sed convallis dignissim felis, id suscipit ligula ultricies eget. Nullam dapibus placerat ligula. Nullam sit amet gravida leo, sit amet viverra nisl. Morbi vitae auctor est. Cras ac finibus dolor. Mauris non dapibus ligula, in volutpat leo. Sed leo massa, imperdiet sed volutpat quis, eleifend vel erat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque nec condimentum turpis, eu mollis ante. Etiam sodales ullamcorper laoreet.
Nulla eu arcu rhoncus, pharetra tellus malesuada, faucibus dui. Maecenas tempus blandit felis, lacinia iaculis nisi eleifend quis. Morbi elit mi, sollicitudin id mollis in, posuere vitae tortor. Integer pulvinar ultricies erat sit amet vestibulum. Fusce quam lacus, lacinia sit amet nulla vel, volutpat luctus elit. Nulla sagittis consequat elit sit amet vestibulum. Praesent vitae bibendum magna. Donec vel vulputate eros. Nulla ultrices, arcu at cursus blandit, ipsum erat feugiat leo, sit amet volutpat tortor lorem sed mi. Morbi sit amet urna non arcu hendrerit ullamcorper id nec nunc. Proin eleifend dictum lacus dignissim pellentesque. Fusce dui dui, ornare id sem vitae, lobortis efficitur elit. Nulla ullamcorper, dui ac interdum convallis, odio ipsum venenatis nisi, ac ultrices velit mi nec lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris varius ante vel augue sagittis tristique. Curabitur nec facilisis ipsum.</p>
<div class="close" id="close_btn4"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Here is a jsfiddle of my work so far
I know you can't see the image but i'll try to explain what I mean. As you can see the header itself animates smoothly as i scroll down. However the image doesn't resize in a smooth transition, it just suddenly changes size. I'd like it to visibly decrease in size along with the header if that makes sense.
I have tried adding transition: all 0.8s ease; to the header-image class but it had no effect.
Any help is greatly appreciated.
HTML:
You didn't set the default value of height of the image.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("scroll");
$('.header-image').addClass("header-image-scroll");
} else {
$('header').removeClass("scroll");
$('.header-image').removeClass("header-image-scroll");
}
});
});
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.header-image {
align-content: center;
height: 200px;
transition: all .5s ease;
}
.scroll {
height: 80px;
font-size: 180%;
}
.header-image-scroll {
height: 80px;
transition: all .5s ease;
}
#center-column {
background-color: white;
width: 1080px;
height: 100%;
box-shadow: 0px 1px 5px #888888;
margin: 0 auto;
padding-bottom: 10px;
}
nav {
}
nav ul {
text-align: center;
display: table;
margin: auto;
}
nav li {
display: table-cell;
vertical-align: middle;
/*display: inline;*/
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #e2030e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<body id="chesters">
<header>
<nav>
<ul>
<li>Menu</li>
<li>Burritos</li>
<li><img class="header-image" src="http://wallpaper-gallery.net/images/image/image-13.jpg"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="Page">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
</div> <!-- Page -->
</body>
As you mention, you need to add transition:all 0.8s ease to it, but you also need to set its initial height.
That is because the default value for height is auto and it cannot be animated.
Demo at https://jsfiddle.net/sbh5fkfx/1/
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/