Develop Reference

Ho to delay the default browser scroll on element?

I'm building the following component using JS / SCSS but I can't achieve one thing, and I googled it but got no results. As you can see in the picture below the images are being delayed on scroll, they start to animate only after the text on right scrolled a bit, there is a delay of 300ms.
Is there a way to delay the scroll behaviour or change the scroll speed of elements in JS?

You could use an absolute or relative placed div with a transition on the top property and a transition delay.
The top could be set dynamically in your onscroll handler, with use of scrollTop.
Check the snippet below or check out this pen for a better example.
$("#container").scroll(function(){
var scrollTop = $(this).scrollTop();
$("#box").css({"top":(scrollTop+50)+"px"});
$("#box2").css({"top":(scrollTop+70)+"px"});
});
#container {
height: 200px;
width: 200px;
overflow: scroll;
}
#box {
position: relative;
top: 50px;
left: 0;
height: 40px;
width: 40px;
background-color: red;
transition: top .2s;
}
#box2 {
position: relative;
top: 70px;
left: 0;
height: 40px;
width: 40px;
background-color: green;
transition: top .2s;
transition-delay: .05s;
}
#content {
position: relative;
top: 0;
left: 50px;
width: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="box"></div>
<div id="box2"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada leo eget nisl euismod vestibulum. Proin nulla urna, ornare non erat vitae, mattis ultrices urna. Etiam elementum, tortor id lacinia mollis, risus odio accumsan ex, eu egestas nisi lacus at purus. Cras vitae orci condimentum, dictum ante nec, laoreet nunc. Cras ut tristique libero. Pellentesque tempus feugiat elit non imperdiet. Cras ac gravida enim, nec pharetra sem. Maecenas luctus leo id quam sodales, sit amet scelerisque sapien efficitur. Pellentesque aliquet fermentum molestie. Praesent a lacinia tellus. Vivamus ut rutrum ex. Pellentesque dapibus magna a mauris facilisis tincidunt. Phasellus vulputate eros ac ultrices lacinia. Mauris sed eleifend enim. Sed eu ultrices nisi.
Sed eget porttitor purus. Praesent quis commodo dolor. Morbi vitae egestas magna. Quisque eu pellentesque velit. Cras eu arcu in tortor bibendum laoreet. Quisque sed turpis risus. Vestibulum efficitur urna malesuada diam dictum, at viverra leo finibus. Duis dignissim justo sem, et euismod nisi aliquam at. Fusce pretium lacus a pretium pulvinar. Aliquam ligula nisl, sodales vel aliquet at, malesuada ac nulla. Nam lorem leo, fermentum nec volutpat id, tincidunt ac diam. Phasellus at congue ligula. Aliquam nibh mi, tempor eu auctor id, sollicitudin eu ante. Donec quis nunc molestie, pretium turpis quis, venenatis arcu.
Quisque quis auctor odio. Maecenas ullamcorper ultricies elementum. Nam sed accumsan turpis. Suspendisse viverra at augue vel lacinia. Nulla eu magna in nisl dapibus sollicitudin ut in sem. Fusce et orci nibh. Suspendisse blandit, erat non pretium condimentum, felis justo hendrerit nisi, quis lacinia eros orci a nibh. Aenean nisl mi, convallis sed convallis vitae, posuere non nunc. Quisque condimentum lorem ut urna tristique hendrerit. Cras suscipit placerat consectetur. Nullam ut iaculis lectus. Suspendisse ultrices sem urna, sit amet efficitur mi eleifend rutrum. Curabitur magna nisi, mollis quis lorem maximus, luctus pretium elit. Nunc commodo tortor sed justo condimentum ultrices. Nullam at ante sit amet leo ullamcorper fringilla. Duis ac purus at mauris fermentum pulvinar.
Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur turpis sapien, semper id nisi at, volutpat aliquam nisi. Quisque nec porttitor odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus suscipit ullamcorper lacus. Mauris lobortis luctus dignissim. Suspendisse non pharetra tortor, ut convallis nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada, turpis nec ultrices tempor, lorem ex fringilla nunc, et efficitur lacus nisl quis nunc. Ut vestibulum elit est, id volutpat libero porttitor in. Mauris sed ante commodo, tristique quam in, molestie mauris. Duis eget porta magna, vitae fermentum ligula. Donec a dapibus nibh, in placerat metus. Donec vulputate metus vitae sapien facilisis pharetra. Nullam dui justo, maximus vel volutpat a, sodales id ligula.
Integer finibus lacus leo, eu semper tellus maximus lobortis. Nulla facilisi. Etiam lobortis interdum quam, non venenatis ligula luctus non. In laoreet, tellus at hendrerit tempus, dolor ex egestas est, in hendrerit libero nulla sit amet est. Vestibulum sem lorem, aliquam in lacus in, rutrum vulputate turpis. Morbi placerat tortor vel scelerisque auctor. Nunc in velit laoreet, egestas ante vitae, faucibus enim. Nam iaculis eros eu efficitur pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sagittis porttitor feugiat. In nibh diam, imperdiet non dapibus sed, dapibus vitae urna. Mauris blandit tincidunt neque non gravida. Curabitur vel lectus nec lectus ullamcorper pretium at dapibus felis. Nulla fermentum, dui et sagittis facilisis, ante mi dignissim quam, non auctor nisl ante vitae mi. In vestibulum, ante vitae tempus ultrices, enim risus tristique nisi, eu aliquet augue nulla eu magna. Fusce volutpat augue sit amet felis blandit aliquam.
</div>
</div>

Minimum Height for Fixed Footer - I USED #media

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>

Gradient / Opacity workaround

I have this situation now: JSFIDDLE
I want to achieve this effect but I want the text to be selectable behind the gradient and the text to be scrollable even if I place the mouse over it.
Is there any workaround maybe playing with a javascript that chenges the opacity of the text on scrolling?
.gradient {
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
...
}

Simply set the pointer-events property of your .gradient element to none, like so:
*{box-sizing:border-box;color:#fff;font-family:sans-serif;font-size:16px;margin:0;padding:0;}
#main{
background:#000;
bottom:0;
left:0;
overflow:auto;
position:fixed;
right:0;
top:0;
}
.text {
line-height:1.25em;
padding:50vh 20px 0;
}
.gradient {
background:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,0));
bottom:50vh;
left:0;
pointer-events:none;
position:fixed;
right:0;
top:0;
}
.text>p{margin:0 0 20px;}
<div id=main>
<div class=gradient></div>
<div class=text><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis bibendum lorem, vel pellentesque nibh. Fusce sollicitudin est nec pharetra lacinia. Fusce ultrices lectus ex, nec pharetra dolor malesuada at. Aenean sagittis, enim non sagittis accumsan, libero nulla ullamcorper nunc, sit amet dapibus orci ligula gravida leo. Suspendisse molestie eros diam, volutpat tincidunt libero faucibus at. Sed condimentum tortor tincidunt tortor accumsan pulvinar. Sed at bibendum lorem, euismod tempor urna. Vivamus quis erat dolor. Maecenas sed nisl luctus, tempor mauris suscipit, porta nisl. Nam ac nulla condimentum, posuere nisl sit amet, tincidunt ante. Sed vestibulum, orci in imperdiet malesuada, ex dolor accumsan tellus, at auctor purus sapien at lacus. Nullam ullamcorper justo ac malesuada blandit. Fusce pretium et massa id eleifend. Cras quis dapibus tellus.</p><p>Curabitur et eros id risus sodales fringilla. Cras iaculis efficitur mi non accumsan. Sed congue ligula ut ligula semper egestas. Duis varius dolor ex, eu tempor nunc auctor ut. In ultricies malesuada eros, sed dictum justo auctor nec. Nunc blandit finibus ligula vel hendrerit. Fusce id blandit ante, sed euismod turpis. Phasellus elit lorem, eleifend ut facilisis non, tincidunt varius arcu. Duis gravida varius quam, vestibulum eleifend nisi volutpat a. In tempus velit justo, a auctor felis congue ac. Praesent dapibus vestibulum ex, a tincidunt justo interdum vel. Integer neque tortor, aliquam vitae quam at, hendrerit ullamcorper tellus. Suspendisse pharetra rutrum nunc vitae tristique. Aenean id ipsum purus. Nunc interdum id odio vel consectetur. Praesent convallis iaculis dolor eu pretium.</p><p>Aenean tincidunt urna vitae euismod vulputate. Integer tincidunt dolor sit amet ligula vehicula aliquet. Aliquam erat volutpat. Vivamus id lorem leo. Fusce faucibus, nisl non malesuada mollis, felis elit aliquam lacus, et ullamcorper lectus felis a eros. Quisque a nulla justo. Phasellus vitae purus viverra, mattis odio vitae, vehicula tellus. Nam eget vehicula velit, sed fermentum arcu. Proin laoreet molestie purus non laoreet. Nunc quis luctus lorem. Sed sit amet sapien quis eros pellentesque vestibulum. Pellentesque semper libero turpis, ac mattis orci tempus quis. Cras nunc nisi, accumsan sed dictum in, condimentum et tortor. Etiam tincidunt eget ex id ultrices. Ut lobortis faucibus porttitor. Mauris nisi est, tincidunt in sagittis eu, fermentum ac purus.</p><p>Phasellus fringilla sodales vehicula. Nam id diam convallis, interdum nisi non, tincidunt felis. Vestibulum efficitur mollis porttitor. Sed vehicula urna eget neque maximus, eget fringilla augue sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur elementum suscipit neque, id lacinia tortor sagittis non. Aenean placerat velit nec tellus mattis, quis lobortis erat vulputate. Donec in ligula fermentum, ornare augue nec, scelerisque leo. Proin nec odio lobortis purus pharetra sodales. Suspendisse finibus ligula in mi venenatis, et lacinia augue euismod. In aliquam velit ac mi laoreet faucibus. Nunc a volutpat ex. Mauris odio velit, efficitur et tortor nec, vulputate hendrerit mauris.</p><p>Morbi vel placerat sapien. Nunc vitae nunc sed magna tincidunt convallis id sit amet dui. Nam diam massa, suscipit et urna eu, egestas accumsan dui. Praesent sagittis dui auctor felis ultrices venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae pharetra leo. Nullam feugiat vestibulum nisi, sit amet tempor purus molestie eget. Aliquam et nisi sit amet purus tempus sollicitudin bibendum ultricies eros. Integer cursus fermentum diam, eget lacinia magna ultrices at. Ut venenatis massa sem.</p></div>
</div>
However, you could achieve the same result with a little less markup by using a pseudo-element to create your gradient:
*{box-sizing:border-box;color:#fff;font-family:sans-serif;font-size:16px;margin:0;padding:0;}
div{
background:#000;
bottom:0;
left:0;
line-height:1.25em;
overflow:auto;
padding:50vh 20px 0;
position:fixed;
right:0;
top:0;
}
div::after{
background:linear-gradient(180deg,rgba(0,0,0,1),rgba(0,0,0,0));
bottom:50vh;
content:"";
left:0;
pointer-events:none;
position:fixed;
right:0;
top:0;
}
.text>p{margin:0 0 20px;}
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis bibendum lorem, vel pellentesque nibh. Fusce sollicitudin est nec pharetra lacinia. Fusce ultrices lectus ex, nec pharetra dolor malesuada at. Aenean sagittis, enim non sagittis accumsan, libero nulla ullamcorper nunc, sit amet dapibus orci ligula gravida leo. Suspendisse molestie eros diam, volutpat tincidunt libero faucibus at. Sed condimentum tortor tincidunt tortor accumsan pulvinar. Sed at bibendum lorem, euismod tempor urna. Vivamus quis erat dolor. Maecenas sed nisl luctus, tempor mauris suscipit, porta nisl. Nam ac nulla condimentum, posuere nisl sit amet, tincidunt ante. Sed vestibulum, orci in imperdiet malesuada, ex dolor accumsan tellus, at auctor purus sapien at lacus. Nullam ullamcorper justo ac malesuada blandit. Fusce pretium et massa id eleifend. Cras quis dapibus tellus.</p><p>Curabitur et eros id risus sodales fringilla. Cras iaculis efficitur mi non accumsan. Sed congue ligula ut ligula semper egestas. Duis varius dolor ex, eu tempor nunc auctor ut. In ultricies malesuada eros, sed dictum justo auctor nec. Nunc blandit finibus ligula vel hendrerit. Fusce id blandit ante, sed euismod turpis. Phasellus elit lorem, eleifend ut facilisis non, tincidunt varius arcu. Duis gravida varius quam, vestibulum eleifend nisi volutpat a. In tempus velit justo, a auctor felis congue ac. Praesent dapibus vestibulum ex, a tincidunt justo interdum vel. Integer neque tortor, aliquam vitae quam at, hendrerit ullamcorper tellus. Suspendisse pharetra rutrum nunc vitae tristique. Aenean id ipsum purus. Nunc interdum id odio vel consectetur. Praesent convallis iaculis dolor eu pretium.</p><p>Aenean tincidunt urna vitae euismod vulputate. Integer tincidunt dolor sit amet ligula vehicula aliquet. Aliquam erat volutpat. Vivamus id lorem leo. Fusce faucibus, nisl non malesuada mollis, felis elit aliquam lacus, et ullamcorper lectus felis a eros. Quisque a nulla justo. Phasellus vitae purus viverra, mattis odio vitae, vehicula tellus. Nam eget vehicula velit, sed fermentum arcu. Proin laoreet molestie purus non laoreet. Nunc quis luctus lorem. Sed sit amet sapien quis eros pellentesque vestibulum. Pellentesque semper libero turpis, ac mattis orci tempus quis. Cras nunc nisi, accumsan sed dictum in, condimentum et tortor. Etiam tincidunt eget ex id ultrices. Ut lobortis faucibus porttitor. Mauris nisi est, tincidunt in sagittis eu, fermentum ac purus.</p><p>Phasellus fringilla sodales vehicula. Nam id diam convallis, interdum nisi non, tincidunt felis. Vestibulum efficitur mollis porttitor. Sed vehicula urna eget neque maximus, eget fringilla augue sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur elementum suscipit neque, id lacinia tortor sagittis non. Aenean placerat velit nec tellus mattis, quis lobortis erat vulputate. Donec in ligula fermentum, ornare augue nec, scelerisque leo. Proin nec odio lobortis purus pharetra sodales. Suspendisse finibus ligula in mi venenatis, et lacinia augue euismod. In aliquam velit ac mi laoreet faucibus. Nunc a volutpat ex. Mauris odio velit, efficitur et tortor nec, vulputate hendrerit mauris.</p><p>Morbi vel placerat sapien. Nunc vitae nunc sed magna tincidunt convallis id sit amet dui. Nam diam massa, suscipit et urna eu, egestas accumsan dui. Praesent sagittis dui auctor felis ultrices venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae pharetra leo. Nullam feugiat vestibulum nisi, sit amet tempor purus molestie eget. Aliquam et nisi sit amet purus tempus sollicitudin bibendum ultricies eros. Integer cursus fermentum diam, eget lacinia magna ultrices at. Ut venenatis massa sem.</p></div>

You may try using:
html {
overflow: overlay;
}
at the end of your .CSS file

Move div to top while scrolling and stay there

How could I make my div move to the top of a page while scrolling as it does by default, but then once it reaches the top of the page, stay there? I have seen this done on other pages, and my guess is that it might not be able to be done with CSS alone, but might need jQuery and JavaScript as well. I would prefer using just CSS, but using jQuery and JavaScript is an option.

Check out this snippet below:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
#sticky {
padding: 0.5ex;
width: 600px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Made for my post: Stick div at top after scrolling.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque,
lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh
lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus.
Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus
non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat.
Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan
ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis
gravida.</p>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
Tutorial: http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html

are you looking for this..
position:fixed;top:0px;

body max-height in Firefox

I have a problem with max-height in Firefox.
I build a short Code Example to show the problem. Please open this example in Chrome and in Firefox. The behaviour in Firefox isn't the same as in chrome.
$(function() {
setTimeout(function() {
$('body').css("max-height", $('body').height() - 100);
}, 250);
});
body{
margin: 0;
padding: 0;
background-color: red;
}
#background-gradient{
position: relative;
top: 0;
width: 100%;
height: 100px;
background-color: blue;
z-index: 1;
}
#page-wrapper{
background-color: green;
margin: 0 auto;
width: 600px;
position: relative;
top: -100px;
z-index: 2;
}
p{
margin-top: 0;
}
p:last-child{
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background-gradient"></div>
<div id="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor facilisis ligula vestibulum fermentum. Curabitur quis imperdiet diam, quis semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sollicitudin accumsan felis, eu lacinia sapien rutrum at. Quisque vel neque non metus viverra lobortis id quis quam. Vivamus hendrerit viverra nisi, at venenatis ipsum fermentum vel. Morbi viverra velit nunc, ac facilisis lectus sodales ac. Donec eleifend tortor nec lectus tristique lacinia. Integer in tellus ut enim faucibus varius. Suspendisse sit amet orci sed ante gravida condimentum.</p>
<p>Sed elit odio, tincidunt ac felis fringilla, volutpat imperdiet lorem. Nam rhoncus magna id magna commodo rhoncus. Integer varius placerat velit quis vulputate. Suspendisse accumsan neque ante, in feugiat odio efficitur ut. Morbi euismod viverra rhoncus. Fusce dignissim dapibus est at egestas. Integer pretium cursus tempor. Suspendisse potenti.</p>
<p>Maecenas vel lobortis ligula. Nam id pulvinar lorem. Aenean tristique dolor eget imperdiet tristique. Duis fringilla, libero et fringilla vulputate, turpis felis tristique augue, non porta nunc est quis dui. Sed imperdiet purus ex, quis faucibus nisl fermentum vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis facilisis, eros at feugiat mollis, libero quam convallis dui, at lacinia metus libero eget enim. Nunc vehicula, dui vitae tempor eleifend, ante augue scelerisque ante, vitae sagittis risus massa sit amet nisi. In imperdiet rhoncus augue, sit amet vehicula erat ultrices non. Nunc tempus in nunc a congue.</p>
<p>Vestibulum eu auctor mi, id sagittis magna. Proin sed condimentum dolor. Etiam commodo orci nunc, eget laoreet elit blandit sed. Nam magna leo, consectetur ut molestie in, tristique sit amet orci. Donec in vehicula est. Praesent elementum faucibus nisl non fringilla. Fusce fermentum sit amet neque a convallis. Fusce a ultricies est, eget iaculis felis. Vivamus ut ante sed ligula accumsan ultricies. Mauris id est ut lacus imperdiet iaculis eget id nunc.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
</div>
What I want to do is: remove the 100px gap on the end of the page. (which is only visible in Firefox).
Off course, I know that I can place the div #background-gradient absolute - which would remove this problem. But this is just an example. When using position: absolute, I will get an background flickering in IE, so I have to do it this way. More Details on this Bug: background-flickering with position absolute/fixed in IE

Use margin-top:-100px instead of top:-100px
If you read the documentation about position:relative it states:
relative
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
body{
margin: 0;
padding: 0;
background-color: red;
}
#background-gradient{
position: relative;
top: 0;
width: 100%;
height: 100px;
background-color: blue;
z-index: 1;
}
#page-wrapper{
background-color: green;
margin: 0 auto;
width: 600px;
position: relative;
margin-top: -100px;
z-index: 2;
}
p{
margin-top: 0;
}
p:last-child{
margin-bottom: 0;
}
<div id="background-gradient"></div>
<div id="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor facilisis ligula vestibulum fermentum. Curabitur quis imperdiet diam, quis semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sollicitudin accumsan felis, eu lacinia sapien rutrum at. Quisque vel neque non metus viverra lobortis id quis quam. Vivamus hendrerit viverra nisi, at venenatis ipsum fermentum vel. Morbi viverra velit nunc, ac facilisis lectus sodales ac. Donec eleifend tortor nec lectus tristique lacinia. Integer in tellus ut enim faucibus varius. Suspendisse sit amet orci sed ante gravida condimentum.</p>
<p>Sed elit odio, tincidunt ac felis fringilla, volutpat imperdiet lorem. Nam rhoncus magna id magna commodo rhoncus. Integer varius placerat velit quis vulputate. Suspendisse accumsan neque ante, in feugiat odio efficitur ut. Morbi euismod viverra rhoncus. Fusce dignissim dapibus est at egestas. Integer pretium cursus tempor. Suspendisse potenti.</p>
<p>Maecenas vel lobortis ligula. Nam id pulvinar lorem. Aenean tristique dolor eget imperdiet tristique. Duis fringilla, libero et fringilla vulputate, turpis felis tristique augue, non porta nunc est quis dui. Sed imperdiet purus ex, quis faucibus nisl fermentum vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis facilisis, eros at feugiat mollis, libero quam convallis dui, at lacinia metus libero eget enim. Nunc vehicula, dui vitae tempor eleifend, ante augue scelerisque ante, vitae sagittis risus massa sit amet nisi. In imperdiet rhoncus augue, sit amet vehicula erat ultrices non. Nunc tempus in nunc a congue.</p>
<p>Vestibulum eu auctor mi, id sagittis magna. Proin sed condimentum dolor. Etiam commodo orci nunc, eget laoreet elit blandit sed. Nam magna leo, consectetur ut molestie in, tristique sit amet orci. Donec in vehicula est. Praesent elementum faucibus nisl non fringilla. Fusce fermentum sit amet neque a convallis. Fusce a ultricies est, eget iaculis felis. Vivamus ut ante sed ligula accumsan ultricies. Mauris id est ut lacus imperdiet iaculis eget id nunc.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
</div>

The height is set on the body, the problem is you need to set overflow:hidden; to prevent the full child element from showing despite being larger than the parent body
$(function() {
setTimeout(function() {
$('body').css("max-height", $('body').height() - 100);
}, 250);
});
body{
margin: 0;
padding: 0;
background-color: red;
overflow:hidden;
}
#background-gradient{
position: relative;
top: 0;
width: 100%;
height: 100px;
background-color: blue;
z-index: 1;
}
#page-wrapper{
background-color: green;
margin: 0 auto;
width: 600px;
position: relative;
top: -100px;
z-index: 2;
}
p{
margin-top: 0;
}
p:last-child{
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background-gradient"></div>
<div id="page-wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor facilisis ligula vestibulum fermentum. Curabitur quis imperdiet diam, quis semper velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sollicitudin accumsan felis, eu lacinia sapien rutrum at. Quisque vel neque non metus viverra lobortis id quis quam. Vivamus hendrerit viverra nisi, at venenatis ipsum fermentum vel. Morbi viverra velit nunc, ac facilisis lectus sodales ac. Donec eleifend tortor nec lectus tristique lacinia. Integer in tellus ut enim faucibus varius. Suspendisse sit amet orci sed ante gravida condimentum.</p>
<p>Sed elit odio, tincidunt ac felis fringilla, volutpat imperdiet lorem. Nam rhoncus magna id magna commodo rhoncus. Integer varius placerat velit quis vulputate. Suspendisse accumsan neque ante, in feugiat odio efficitur ut. Morbi euismod viverra rhoncus. Fusce dignissim dapibus est at egestas. Integer pretium cursus tempor. Suspendisse potenti.</p>
<p>Maecenas vel lobortis ligula. Nam id pulvinar lorem. Aenean tristique dolor eget imperdiet tristique. Duis fringilla, libero et fringilla vulputate, turpis felis tristique augue, non porta nunc est quis dui. Sed imperdiet purus ex, quis faucibus nisl fermentum vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis facilisis, eros at feugiat mollis, libero quam convallis dui, at lacinia metus libero eget enim. Nunc vehicula, dui vitae tempor eleifend, ante augue scelerisque ante, vitae sagittis risus massa sit amet nisi. In imperdiet rhoncus augue, sit amet vehicula erat ultrices non. Nunc tempus in nunc a congue.</p>
<p>Vestibulum eu auctor mi, id sagittis magna. Proin sed condimentum dolor. Etiam commodo orci nunc, eget laoreet elit blandit sed. Nam magna leo, consectetur ut molestie in, tristique sit amet orci. Donec in vehicula est. Praesent elementum faucibus nisl non fringilla. Fusce fermentum sit amet neque a convallis. Fusce a ultricies est, eget iaculis felis. Vivamus ut ante sed ligula accumsan ultricies. Mauris id est ut lacus imperdiet iaculis eget id nunc.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
<p>Proin dignissim augue suscipit diam porttitor dapibus. Maecenas vel iaculis sem. Proin ut rhoncus mi. Aliquam ultrices mauris et velit lobortis aliquet. Donec quis commodo odio. Nullam nec lectus orci. Nunc id risus odio. Proin maximus odio in nibh dignissim, ut tincidunt est volutpat. Integer mollis maximus varius. Quisque dignissim lorem eu nibh vulputate gravida. Etiam accumsan lectus sit amet tortor tincidunt elementum. Nulla leo nisi, egestas ac imperdiet sit amet, sodales et urna.</p>
</div>