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>
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 have a menu and footer with a position:fixed;, so they stay all the time at the top and bottom.
In this case Menu is always at the top and footer always at the bottom.
Here is the HTML Markup and CSS
PLEASE READ BELOW TO SEE WHAT I AM TRYING TO ACHIEVE AND TO SEE UPDATE.
**** ORIGINAL POST ****
html, body {
padding:0;
margin:0;
}
nav, footer {
position:fixed;
background:#900;
height:50px;
width:100%;
}
nav {
top:0;
}
footer {
bottom:0;
}
p {
background: #E6E6E6;
margin:0 0 10px 0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Footer</title>
</head>
<body>
<nav>Top Fixed Menu</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut libero in est dictum rutrum eu in nibh. Etiam tincidunt neque ante, eu efficitur velit semper sed. Ut lobortis et felis vitae aliquet. Nulla tincidunt leo vitae elit posuere, eu fermentum metus dictum. Praesent tincidunt egestas massa. Cras iaculis aliquam malesuada. Pellentesque at turpis diam. Vestibulum turpis augue, pulvinar et augue quis, venenatis dapibus dui. Nunc sollicitudin porta mauris, vel gravida erat placerat a.</p>
<p>Vivamus facilisis orci nec leo ultrices tristique. Donec euismod tincidunt luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer congue mattis convallis. Curabitur in dictum nisi, lacinia porta lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo imperdiet scelerisque. Mauris vitae erat ut enim imperdiet pulvinar a vitae augue. Pellentesque non sem ipsum. Nam id quam metus. Aliquam nulla ipsum, ullamcorper vel est vitae, euismod feugiat massa. Nullam molestie, odio sollicitudin egestas laoreet, elit tortor pharetra arcu, consectetur dignissim quam libero in augue. Suspendisse augue diam, condimentum nec sagittis ac, rutrum sit amet orci. Nulla facilisi. Cras finibus lorem diam. In non tortor ut urna lobortis fermentum. Maecenas a orci odio. Aenean turpis enim, tincidunt nec mi non, dapibus iaculis diam. Vivamus eleifend velit id nulla eleifend gravida.</p>
<p>Sed rutrum dui non dui rhoncus tristique. Nulla in enim est. Sed sollicitudin pharetra risus ut vestibulum. Sed sed cursus magna, non imperdiet turpis. Praesent gravida lacinia congue. In non neque sed nulla fermentum eleifend gravida ac sem. In eget molestie velit. Suspendisse bibendum nec eros id dapibus. Quisque sagittis a ante in mollis.</p>
<footer>Bottom Fixed Footer</footer>
</body>
</html>
What I am trying to achieve is that if viewport goes below 300px in height the distance between the Top Menu and the Footer is always 500px.
But if viewport goes beyond 500px in height, the Top Menu and Footer stay fixed at the top and the bottom and the space between them increases as long as the viewport keeps increasing.
How I can achieve this?
The content flow when scrolling if anyone wonders.
**** UPDATED ****
I end up using #media for that specific height I did not want the footer to be fixed when viewport was below 500 px height.
Originally I had this
nav, footer {
position:fixed;
background:#900;
height:50px;
width:100%;
}
I just added this add media when the viewport goes below 500px height.
#media screen and (max-height: 499px) {
footer {
position:relative;
}
}
I also added this inside the HEAD element to make the #media work.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If the viewport is <500px, limit the displayed area to the height minus the header, while keeping the footer at the bottom. If it is >500px, also keep the footer at the bottom.
This should work:
function addmore() {
for (var i = 0; i < 60; i++)
document.getElementById('a').innerHTML = '<p>'+i+': some page content</p>' + document.getElementById('a').innerHTML;
}
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
overflow-y: hidden;
min-height: 500px;
display: flex;
flex-direction: column;
}
nav,
footer {
flex: 0;
background: red;
line-height: 50px;
color: white;
width: 100%;
}
main {
flex: 1;
position: relative;
overflow-y: auto;
max-height: calc(100% - 100px);
}
#media screen and (max-height: 499px) {
.content {
max-height: calc(100vh - 50px);
width: 100%;
overflow-y: auto;
}
}
<body>
<nav>nav bar</nav>
<main>
<section class="content">
<button onclick="addmore()">add more</button>
<p id="a">some page content</p>
</section>
</main>
<footer>footer</footer>
</body>
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/