jquery resizable handler moves with the content?

jquery resizable handler moves with the content? - javascript

Ive made this jsfiddle that explains everything.
My JSFiddle
asd
Look what happens to the resize handler when you scroll down/up.
How do i change that? Could i add some css to this to stick always fixed at the bottom of the div?

The html/css structure is not correct. You should have a parent (resizable box), a child (with the handles) and a sub-child with the content.
This should do the trick:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script></script>
<script type="text/javascript" >
jQuery(document).ready(function($) {
$("#resizable").resizable();
});
</script>
<style type="text/css">
#resizable{
width: 250px;
height: 200px;
background-color: #eee;
text-align: center;
}
#resizable .handles {
width:100%;
height:inherit;
overflow: auto;
}
#resizable .handles .content {
display:block;
padding-left: 20px;
padding-right: 20px;
}
</style>
</head>
<body>
<div id="resizable">
<div class="handles">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut sagittis erat. Ut vitae dictum leo. Proin dignissim lobortis nunc, vitae suscipit ante viverra eu. Integer mauris orci, dignissim a venenatis convallis, dictum vitae leo. Nullam sapien tellus, tristique in venenatis sed, malesuada id justo. Aliquam lobortis consectetur augue, id condimentum odio bibendum sit amet. Suspendisse bibendum, urna nec luctus lobortis, ipsum risus placerat dolor, eget interdum dui mi ut neque. Nunc imperdiet pretium magna eget malesuada. Nam mattis magna in enim ultrices pharetra eu ac leo. Nullam sed purus dolor, a faucibus ipsum. Donec et sagittis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sollicitudin vehicula laoreet. Duis luctus mattis massa vehicula pulvinar. Integer dictum ultricies augue, non aliquet enim dictum ac. Etiam non mi in nisi porta pulvinar eu non dolor. Nullam et nisl eget sem auctor tincidunt vel ut metus. Vestibulum sed est quis mauris rutrum tristique. Aenean pellentesque malesuada leo non pharetra. Integer commodo, eros vel sollicitudin porta, turpis lacus accumsan magna, non imperdiet mauris mi ut lectus. Nulla eget velit purus. In et nulla mauris. Ut elementum ligula eget est gravida ut euismod tellus auctor. Cras enim velit, vulputate quis iaculis at, sagittis vel nisl. Proin sagittis est quis mi volutpat et molestie nisi pretium. Aliquam pulvinar aliquet nisl a laoreet. Suspendisse potenti. Praesent molestie mattis felis et suscipit. Curabitur vulputate est nec nunc sollicitudin ultricies. Aliquam et sapien eros, vitae molestie massa. Nullam quis pellentesque odio. Suspendisse at mauris vel massa consequat tempor sed eget nulla. Suspendisse ullamcorper, velit mattis condimentum sodales, est massa sollicitudin velit, vel laoreet turpis est ut metus. Suspendisse elementum, diam sit amet tincidunt cursus, orci erat sollicitudin neque, id varius augue nibh vitae odio. Proin congue metus id arcu congue adipiscing. Maecenas sed augue in metus placerat blandit non vel dui. Duis nec placerat justo. Maecenas metus dui, aliquet id fermentum non, fringilla mattis nibh. Donec porta pellentesque ligula, fringilla tristique justo aliquam non. Sed mi arcu, tincidunt a pulvinar eu, varius vitae ante. Donec congue egestas ipsum. Quisque feugiat, magna vel ultricies auctor, nulla velit luctus enim, sed adipiscing felis arcu vitae elit. Phasellus luctus sapien vitae tortor pulvinar vel placerat purus tincidunt. Phasellus posuere molestie purus. Donec mauris neque, bibendum nec consectetur eget, porttitor ut lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictums
</div>
</div>
</div>
</body>
</html>
hope this helps, happy coding :)

Related

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>

Pan and zoomable view container in html

I want to have a <div> as a pan-zoomable view that has some other HTML elements like images, other divs and etc in it. I saw many examples and implements on the internet, but those are using canvas or SVG.
In my case, I don't wanna use canvas to add HTML elements in it, cause the inner elements have some js behaviors that I can't implement them on canvas.
Note that I don't wanna make my inner elements draggable, zoomable or something like that, I just want my entire view to be pan-zoomable. Imagine a 500*500 <div> that shows a 1500*1000 <div> with some elements in it. Something like google map that has HTML elements inside.

Use rem units for all element's dimensions in your zoomable view. rem is root em, i.e. font-size of html tag (i.e. root). And then change font-size of html tag to zoom.
But don't use this units for the other blocks you don't want to zoom.
Demo:
html {
font-size: 10px;
}
.resizable {
/* 30 * 10px = 300px */
width: 30rem;
/* 12 * 10px = 120px */
height: 12rem;
/* 0.25 * 10px = 4px */
border: 0.25rem solid orange;
font-size: 1.5rem;
}
img {
display: block;
/* 15 * 10px = 150px */
width: 15rem;
/* 8 * 10px = 80px */
height: 8rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="$(`html`).css('font-size', parseInt($(`html`).css('font-size')) - 1)">
-
</button>
<button onclick="$(`html`).css('font-size', parseInt($(`html`).css('font-size')) + 1)">
+
</button>
<div class="resizable">
This is resizable text and resizable image
<img src="https://i.stack.imgur.com/uubYJ.jpg" />
</div>
Also you can consider using em units if you can cope with calculating proper sizing or you don't have to set different font-size values in element hierarchy.

You can apply transform: scale with some zoom value for this view to zoom. If you want to display 1500x1000 view in 500x500 zoomable view you should use transform: scale(0.33, 0.5). Demo:
.zoomable {
width: 500px;
height: 500px;
}
.zoomed {
width: 1500px;
height: 1000px;
overflow: hidden;
transform: scale(0.33, 0.5);
/* to move transformed elements to top left corner */
transform-origin: 0 0;
}
<div class="zoomable">
<div class="zoomed">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus varius dignissim urna, finibus vulputate mi egestas eu. Etiam non eros lacinia, molestie diam in, facilisis purus. Morbi sed risus sodales, elementum neque quis, volutpat lectus. Nullam
neque mauris, iaculis quis felis sed, luctus tempus nunc. Maecenas est nulla, tempor sed dictum at, faucibus a sapien. Pellentesque vitae libero urna. Ut porta placerat malesuada. Sed aliquam et risus a laoreet. Nunc vel lacus vel lectus placerat
pellentesque. Mauris lobortis ante vel mauris tincidunt, ut accumsan magna cursus. Phasellus ante dolor, mollis id congue ut, rhoncus porta augue. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque placerat nibh eget feugiat tempor.
Nam pellentesque ullamcorper elit eu sodales. Aliquam at mi vel metus condimentum condimentum sed eu tortor. In hac habitasse platea dictumst. Donec consequat sapien non dui finibus, sit amet laoreet arcu vehicula. Sed a dui et massa commodo commodo
ut nec augue. Sed suscipit nibh nec nisl facilisis, nec finibus diam ullamcorper. Mauris bibendum commodo turpis eu fermentum. Sed porta, lectus sit amet pulvinar auctor, ante urna dignissim mauris, hendrerit suscipit magna dui in urna. Quisque convallis
tellus et semper iaculis. Mauris fringilla velit in magna tempor bibendum. Aenean ultricies at justo vitae congue. Pellentesque a purus sed justo semper bibendum. Nunc ut tortor quis eros laoreet gravida maximus sit amet lacus. Mauris vel consequat
ipsum, in vehicula eros. Duis enim dolor, convallis sed nunc nec, scelerisque tempus ligula. Nullam consequat velit sit amet risus congue, nec condimentum lacus bibendum. Aliquam ornare justo nec nunc eleifend, tristique condimentum nulla vulputate.
Donec id orci turpis. Donec porta rutrum massa ac aliquam. In eu ante sed odio dapibus congue. Aliquam tempus nisi nec porta tempus. Aliquam quam augue, commodo at tortor vitae, condimentum eleifend massa. Ut sollicitudin, nunc eget pretium ullamcorper,
nibh tellus imperdiet enim, at tincidunt nisi metus vel diam. Morbi volutpat velit magna, eu facilisis est luctus volutpat. Maecenas volutpat metus quis elit tristique, non sollicitudin tortor iaculis. Mauris a purus leo. Pellentesque eu mauris sit
amet est mollis cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam pellentesque cursus mattis. Suspendisse varius elit vitae scelerisque consectetur. Quisque finibus quam quis lacus dignissim, vestibulum
aliquam erat pulvinar. Ut risus nisi, ultrices eu purus eget, scelerisque tempor ex. Nam pretium placerat orci ut pharetra. Pellentesque sit amet tincidunt orci. Maecenas laoreet porttitor volutpat. Cras vitae mauris mauris. Sed a lacus id felis efficitur
pellentesque. Nulla facilisi. Integer urna nibh, feugiat commodo lectus at, commodo vehicula arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla mauris lectus, ultricies et elit vel, feugiat ultrices
sem. Nunc imperdiet sed erat et imperdiet. Donec non tincidunt nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ultricies, massa sit amet congue rhoncus, augue nibh imperdiet eros, vitae ornare risus
ante id magna. Suspendisse ac leo nulla. Praesent eu ex rhoncus, scelerisque sem sed, porta leo. Sed faucibus, velit placerat lacinia iaculis, turpis libero convallis lacus, eu mattis ante lectus non urna. Fusce semper sodales urna non sodales. Nunc
ex sapien, ultrices eget dolor sit amet, vestibulum aliquet mi. Aliquam bibendum mollis odio. Phasellus porta commodo est nec placerat. Sed faucibus sapien id enim dignissim, non ullamcorper eros cursus. Integer auctor eu quam ac mollis. Suspendisse
et nisl lectus. Phasellus purus erat, aliquet et neque in, aliquet posuere sapien. Phasellus eget purus iaculis tortor porta maximus ut non est. Cras ac euismod elit. Vivamus interdum odio sit amet gravida sollicitudin. Cras sed elit vel magna rhoncus
consectetur ut a ante. Nullam pulvinar convallis nisi quis maximus. Sed ullamcorper neque at luctus efficitur. Donec ligula ex, auctor id magna sed, tempor maximus sapien. Etiam rhoncus, felis sed fringilla pellentesque, justo sapien hendrerit odio,
eget tincidunt urna magna ac orci. Nam pharetra vitae eros non bibendum. Nulla sit amet ligula quis massa aliquet auctor. Praesent id eros non odio ultricies venenatis a ac metus. Sed ante justo, gravida id ipsum tempor, dignissim dapibus ligula.
Nulla vulputate cursus fringilla. Ut ultricies ornare quam. Vivamus ac malesuada felis, ac laoreet velit. Curabitur ut nisl pulvinar orci placerat sagittis convallis id elit. Mauris vitae lacus quis metus porta viverra. Nam porttitor neque ipsum,
et tincidunt nisi interdum a. Suspendisse potenti. Donec lacinia convallis maximus. Suspendisse bibendum nisl ex, nec eleifend magna ornare in. Praesent diam orci, iaculis quis nunc sit amet, mattis rutrum lorem. Maecenas bibendum vel eros non imperdiet.
Etiam accumsan sem sit amet orci porta, auctor ultricies elit posuere. Curabitur leo mauris, tempus et elementum non, malesuada et velit. Phasellus in tellus vitae diam placerat condimentum vitae quis neque. Maecenas nec eros eget tellus sollicitudin
fermentum a nec magna. Phasellus sagittis nunc a convallis suscipit. Quisque cursus, dui vitae sollicitudin pulvinar, sem velit rutrum enim, nec dictum lectus dolor nec augue. Nam volutpat metus et semper ultrices. Sed faucibus purus turpis, vel placerat
arcu posuere in. Mauris a scelerisque ex. Quisque eget pellentesque est. Cras vitae eros sit amet urna interdum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam porttitor nibh vitae metus
varius lobortis. Phasellus vitae vehicula justo. Sed blandit, mi ac scelerisque hendrerit, massa eros ullamcorper orci, ac finibus magna felis nec neque. Proin sollicitudin tristique ante blandit tempus. Proin eget placerat eros. Donec dignissim,
ligula id hendrerit aliquam, turpis neque pellentesque ligula, nec volutpat dui nisi ac sapien. Nulla rhoncus neque quis sollicitudin venenatis. Nullam sed dapibus nunc. Suspendisse porta cursus scelerisque. In maximus nisl vitae fermentum molestie.
Cras a diam quis sem scelerisque molestie. Maecenas iaculis aliquam nibh, auctor imperdiet metus fermentum in. Pellentesque ac dui ornare, blandit ipsum nec, placerat ante. Morbi gravida varius ex. Proin efficitur molestie placerat. Nunc suscipit
arcu eu dui ultricies accumsan. Aliquam quis ex in neque hendrerit porttitor. Donec luctus lorem lorem, quis tempor dolor gravida vel. Nulla eget nisi metus. Curabitur maximus ante arcu, id ultrices arcu pharetra nec. Donec erat arcu, vulputate a
felis in, aliquet venenatis augue. Nulla sollicitudin in ligula vel ornare. Duis tempor mi et turpis viverra faucibus nec in ante. Cras laoreet mauris at nunc vehicula, eu accumsan ligula eleifend. Mauris vestibulum cursus nunc nec ornare. Morbi nec
eros orci. Curabitur et dolor gravida elit volutpat pharetra. Nulla dapibus ultrices quam, ut scelerisque odio euismod et. Aliquam consequat nisi at mauris aliquet vehicula. Proin lorem leo, consectetur scelerisque tempus et, sollicitudin nec ipsum.
Nullam laoreet lectus vitae justo blandit porttitor. Sed et tristique enim. Phasellus nisi mauris, rutrum nec erat nec, scelerisque finibus erat. Sed euismod, diam sed scelerisque aliquet, lectus ante congue dolor, nec commodo nisi massa et turpis.
Ut vestibulum, mi a faucibus venenatis, mi justo mollis sapien, non feugiat tellus sem id justo. Vivamus consectetur lorem et volutpat volutpat. In dapibus tempor metus id euismod. Nunc eu ligula hendrerit, convallis risus a, varius orci. Mauris sed
vehicula velit, in rutrum tellus. Etiam venenatis aliquet vulputate. Nunc suscipit viverra consequat. Pellentesque venenatis finibus velit, nec ultricies lorem aliquam vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hac habitasse
platea dictumst. Nam dictum interdum mattis. Nunc cursus erat ut nisl sollicitudin, a malesuada ipsum rutrum. Maecenas vulputate ligula et ligula tempor accumsan. Nam dictum mi ligula, vel commodo elit rutrum nec. Donec feugiat imperdiet sem sed posuere.
Nunc convallis egestas lorem vel auctor. Donec et magna at augue rutrum efficitur et non est. In a placerat mi. Nunc in molestie mauris. Quisque efficitur orci a lorem finibus porta. Proin semper nec quam ac posuere. Sed egestas nisl ac nibh egestas,
ac efficitur mauris sagittis. Nam id tincidunt tortor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam eget libero porta libero venenatis pharetra sit amet at leo. Ut efficitur, elit et elementum iaculis, mauris ligula sollicitudin
tellus, in feugiat elit urna in quam. Sed vitae nisi eu nisi congue vehicula. Duis eget tincidunt lorem. Ut sem augue, fringilla quis eros ut, tempor vulputate arcu. Aenean facilisis consequat lectus in tempor. Suspendisse aliquet sagittis mauris
id efficitur. Nam aliquam purus id lectus viverra luctus. Ut sagittis, leo cursus consequat fringilla, sem nisl interdum ipsum, ut imperdiet sapien ligula eget nisi. Aliquam eget suscipit nisi. Nunc vel lorem sed augue convallis rutrum ac quis arcu.
Nullam eu mi rhoncus, pretium leo at, luctus turpis. Etiam eget dolor et risus placerat facilisis nec quis tellus. Fusce vestibulum a felis at facilisis. Nulla sit amet est tortor. Suspendisse potenti. Donec aliquam magna vel tincidunt tempus. Quisque
et nunc massa. Aliquam ultrices, metus eget pretium varius, massa ex vulputate dui, at ornare massa tortor eu urna. Vestibulum semper mi a consequat porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc
pharetra varius mauris. In efficitur, lorem a commodo pharetra, risus lectus pulvinar felis, at pharetra turpis ligula quis sem. Phasellus bibendum, ex sit amet convallis gravida, sapien sapien iaculis dolor, nec iaculis mi elit ut justo. Integer
est sem, finibus vel ultrices id, ultrices eget leo. Cras luctus sapien sit amet mollis sollicitudin. Nam a turpis ac nisl blandit maximus. Etiam venenatis gravida mi, a fermentum elit congue eget. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Proin ullamcorper ex eget turpis ornare porttitor. Proin ullamcorper egestas nunc eget viverra. Proin ornare dui vel egestas vehicula. Aenean sem metus, convallis eget felis vel, rhoncus laoreet elit. Cras ut orci a nisi suscipit consectetur.
Quisque laoreet, mi ac egestas imperdiet, arcu lectus tempus dui, non semper tellus orci eu massa. Etiam quis enim nec purus tempor dapibus. Integer laoreet dui nec vulputate commodo. Praesent facilisis leo iaculis sollicitudin commodo. In non nibh
nec quam sollicitudin facilisis. Morbi ut elementum dui. Ut imperdiet semper dui eget hendrerit. Proin hendrerit egestas faucibus. Maecenas faucibus velit vel mauris volutpat, non vehicula dolor suscipit. Integer magna odio, feugiat nec libero eget,
porta ultrices magna. Sed in tristique turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ac tortor tellus. Nam placerat nulla non odio convallis ullamcorper. Fusce odio nibh, rutrum a ultricies
in, venenatis et orci. Pellentesque dictum quis lectus ac congue. Maecenas eleifend quis lorem ullamcorper elementum. Fusce velit leo, fringilla eu congue ut, blandit et est. Fusce sed lacus quis metus maximus molestie. Curabitur euismod turpis in
ante consequat aliquam a a ante. Mauris lectus nunc, laoreet id libero eu, feugiat vehicula est. Maecenas maximus, ligula ut rutrum mattis, elit nisl vulputate neque, ut condimentum augue est at libero. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Mauris faucibus purus eu ante aliquam finibus. Nunc nunc diam, euismod quis sem at, pulvinar porttitor lacus. Phasellus varius metus in mattis pellentesque. Nunc id quam ex.
</div>
</div>

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

Scroll up/down with pure javascript

I've always used jQuery for animations but this time I can't use it, so I need some help with vanilla javascript where I suck.
Description:
I have a div with limited height and vertical scrollbar.
On the top and on the bottom I have buttons for scrolling content up/down inside this div. Buttons have fixed top/bottom position.
So, if I click top button, I want content inside this div to slide down.
And when clicking on bottom buttom, I want content to slide up.
Perfect scenario would be if I hold mouse button (or finger on touch devices) on button, scrolling should continue. If I only click once/tap, I would like to have an option to set amount of scrolling (in px, maybe as a parameter in a function).
This is my HTML:
<div id="header">
<input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down">
</div>
<div id="content">
<div id="inner">
<p>Here comes a very long text</p>
</div>
</div>
<div id="footer">
<input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up">
</div>
I've created an example (without javascript): https://jsfiddle.net/esedic/L0u4a2d0/

check this fiddle: https://jsfiddle.net/9257p50r/2/
var scrollDown,scrollUp;
var contentEle = document.getElementById('content');
var downBtn = document.getElementById('down');
var upBtn = document.getElementById('up');
downBtn.addEventListener("mousedown", function(){
scrollDown = setInterval(function(){
contentEle.scrollTop += 20;
},100)
});
upBtn.addEventListener("mousedown", function(){
scrollUp = setInterval(function(){
contentEle.scrollTop -= 20;
},100)
});
downBtn.addEventListener("mouseup", function(){
clearInterval(scrollDown);
});
upBtn.addEventListener("mouseup", function(){
clearInterval(scrollUp);
});
/* mobile touch */
downBtn.addEventListener("touchstart", function(){
scrollDown = setInterval(function(){
contentEle.scrollTop += 20;
},100)
}, false);
downBtn.addEventListener("touchend", function(){
clearInterval(scrollDown);
}, false);
upBtn.addEventListener("touchstart", function(){
scrollUp = setInterval(function(){
contentEle.scrollTop -= 20;
},100)
}, false);
upBtn.addEventListener("touchend", function(){
clearInterval(scrollUp);
}, false);
body {
padding: 1em;
margin-top: 2.5em;
}
#header {
position: fixed;
top: 1em;
left: 1em;
}
#footer {
position: fixed;
bottom: 1em;
left: 1em;
}
#content {
max-height: 570px;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
<div id="header">
<input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down">
</div>
<div id="content">
<div id="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p>
<p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p>
<p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p>
<p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p>
<p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p>
<p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p>
<p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p>
<p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p>
<p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p>
</div>
</div>
<div id="footer">
<input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up">
</div>

Use addEventListener
var down = document.querySelector("#down"),
up = document.querySelector("#up"),
content = document.querySelector("#content");
function scrollDown(){content.scrollTop = content.scrollHeight}
function scrollUp(){content.scrollTop = 0}
down.addEventListener("click",scrollDown,false);
up.addEventListener("click",scrollUp,false);
body {
padding: 1em;
margin-top: 2.5em;
}
#header {
position: fixed;
top: 1em;
left: 1em;
}
#footer {
position: fixed;
bottom: 1em;
left: 1em;
}
#content {
max-height: 570px;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#inner {
}
<div id="header">
<input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down">
</div>
<div id="content">
<div id="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p>
<p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p>
<p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p>
<p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p>
<p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p>
<p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p>
<p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p>
<p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p>
<p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p>
</div>
</div>
<div id="footer">
<input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up">
</div>

Use jQuery:
var scrolled = 0;
$(document).ready(function() {
$("#downClick").on("click" ,function() {
scrolled = scrolled + 900;
$(".cover").animate({
scrollTop: scrolled
});
});
$("#upClick").on("click" ,function() {
scrolled = scrolled - 300;
$(".cover").animate({
scrollTop: scrolled
});
});
$(".clearValue").on("click" ,function() {
scrolled = 0;
});
});
http://jsfiddle.net/xEFq5/10/

How to fix a div below the header after scrolling it up?

I have a header and a banner below it. Below this banner I have my content. So when i scroll the banner should go away(in my case I have increased z index of header so banner basically hides behind it) and when you scroll the content should come up to merge with the header . So i was able to do this with little CSS.
Now when my content div merges with the header I want it to stick there and then the entire page should scroll up together.
Current CSS to Scroll
#header {
height: 100px;
background: #bdbdbd;
position: fixed;
width: 100%;
z-index: 10;
}
#banner {
width: 100%;
height: 300px;
position: fixed;
top: 100px;
background: #707070;
}
#content {
width: 100%;
position: relative;
top: 400px;
background: #ebebeb;
height: 1500px; /* Demo purposes */
}
How do I achieve this?

Try this:
<style type="text/css">
#header {
height: 100px;
background: #bdbdbd;
position: fixed;
width: 100%;
z-index: 9999;
top:0px;
}
#content {
width: 100%;
position: relative;
margin-top:100px;
background: #ebebeb;
}
#banner {
position:relative;
width: 100%;
height: 300px;
background: #707070;
}
#banner.stick {
position: fixed;
top: 100px;
z-index: 1000;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
</style>
Here is body:
<body style="padding:0px; margin:0px;">
<div id="header">This is header</div>
<div id="content">
<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>
<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>
<div id="sticky-anchor"></div>
<div id="banner">This will stay at top of page</div>
<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>
</div>
<script type="text/javascript">
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top-100;
if (window_top > div_top) {
$('#banner').addClass('stick');
} else {
$('#banner').removeClass('stick');
}
}
$(function () {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
</body>

Develop Reference

JavaScript is the programming language of the Web.