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>
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
I've made these accordion navigation and it works (mainly) as expected.
BUT: If one opens the text-sections by clicking on the expand-/contract-buttons one can see that the whole content-container moves to the left, respectively to the right.
Currently I've got no idea were these moving comes or how to prevent it.
Perhaps someone has an idea what goes wrong there?
// Get all span-"buttons".
var buttons = document.querySelectorAll('.sign');
buttons = Array.prototype.slice.call(buttons);
// Toggles the visibility of the text-paragraphs.
function toggleDisplayed() {
var section = this.parentNode;
var paragraphs = section.getElementsByTagName('p');
// Storing the context.
var that = this;
// Removes a class and adds the opposite class.
// --- Parameter -------
// 1.: Paragraph-element on which to add / remove.
// 2.: The class to remove.
// 3.: The class to add.
// 4.: The text-node of the span-element.
var manageClasses = function(paragraphObject, toRemove, toAdd, newSign) {
paragraphObject.classList.remove(toRemove);
paragraphObject.classList.add(toAdd);
that.textContent = newSign;
}
paragraphs = Array.prototype.slice.call(paragraphs);
// Change the state of the paragraphs in the section.
paragraphs.forEach(function(paragraph, i) {
if (paragraph.classList.contains('notDisplayed')) {
manageClasses(paragraph, 'notDisplayed', 'displayed', '-');
} else {
manageClasses(paragraph, 'displayed', 'notDisplayed', '+');
}
});
}
// Attach the toggle-function to all span-"buttons".
buttons.forEach(function(button, i) {
button.addEventListener('click', toggleDisplayed)
});
body {
background-color: rgba(240, 240, 240, 1.0);
overflow-y: scroll;
}
.wrap {
width: 800px;
margin: 0 auto;
padding: 10px 25px;
background-color: rgba(250, 250, 250, 1.0);
border-radius: 6px;
}
.wrap h3 {
display: inline-block;
width: 200px;
}
/* The toggle-Button */
.sign {
font-size: 120%;
font-weight: bold;
color: white;
background-color: rgba(50, 50, 50, 1.0);
border-radius: 30%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
display: inline-block;
}
.sign:hover {
background-color: rgba(50, 50, 50, 0.7);
}
.notDisplayed {
display: none;
}
.displayed {
display: block;
}
<div class="wrap">
<section>
<h2>About us</h2>
<p> Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero.</p>
</section>
<section class="info-about">
<h3>Current projects</h3><span class="sign">+</span>
<p class="notDisplayed">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p class="notDisplayed">Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem.</p>
</section>
<section class="info-about">
<h3>Future projects</h3><span class="sign">+</span>
<p class="notDisplayed">Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut leo. Ut a nisl id ante tempus hendrerit.</p>
</section>
<section class="info-about">
<h3>Closed projects</h3><span class="sign">+</span>
<p class="notDisplayed">Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius. Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vivamus aliquet elit ac nisl. Fusce fermentum odio nec arcu. Vivamus euismod mauris. In ut quam vitae odio lacinia tincidunt. Praesent ut ligula non mi varius sagittis. Cras sagittis. Praesent ac sem eget est egestas volutpat. Vivamus consectetuer hendrerit lacus. Cras non dolor. Vivamus in erat ut urna cursus vestibulum. Fusce commodo aliquam arcu. Nam commodo suscipit quam.</p>
<p class="notDisplayed">Quisque id odio. Praesent venenatis metus at tortor pulvinar varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>
</section>
</div>
That happens when the scroll bar appears, because you defined an auto margin to your wrap. You can turn on the scroll bar, this is the easiest way to fix it.
just add this CSS property to your wrap DIV:
overflow-y: scroll;
Remove the last two rules display: and use visibility instead see demo. The reason why the display jumps is because display: none actually removes the element from DOM so there's a sudden empty space that is obvious when the element is display:block and jumps in to fill that empty space.
Withvisibility: hidden, the element is still there taking up space it's just invisible unlike display:none which achieves invisibility by not existing at all.
.notDisplayed {
visibility: hidden;
}
.displayed {
visibility: visible;
}
// Get all span-"buttons".
var buttons = document.querySelectorAll('.sign');
buttons = Array.prototype.slice.call(buttons);
// Toggles the visibility of the text-paragraphs.
function toggleDisplayed() {
var section = this.parentNode;
var paragraphs = section.getElementsByTagName('p');
// Storing the context.
var that = this;
// Removes a class and adds the opposite class.
// --- Parameter -------
// 1.: Paragraph-element on which to add / remove.
// 2.: The class to remove.
// 3.: The class to add.
// 4.: The text-node of the span-element.
var manageClasses = function(paragraphObject, toRemove, toAdd, newSign) {
paragraphObject.classList.remove(toRemove);
paragraphObject.classList.add(toAdd);
that.textContent = newSign;
}
paragraphs = Array.prototype.slice.call(paragraphs);
// Change the state of the paragraphs in the section.
paragraphs.forEach(function(paragraph, i) {
if (paragraph.classList.contains('notDisplayed')) {
manageClasses(paragraph, 'notDisplayed', 'displayed', '-');
} else {
manageClasses(paragraph, 'displayed', 'notDisplayed', '+');
}
});
}
// Attach the toggle-function to all span-"buttons".
buttons.forEach(function(button, i) {
button.addEventListener('click', toggleDisplayed)
});
body {
background-color: rgba(240, 240, 240, 1.0);
/*overflow-y: scroll;*/
}
.wrap {
width: 800px;
margin: 0 auto;
padding: 10px 25px;
background-color: rgba(250, 250, 250, 1.0);
border-radius: 6px;
/*overflow-y: scroll;*/
}
.wrap h3 {
display: inline-block;
width: 200px;
}
/* The toggle-Button */
.sign {
font-size: 120%;
font-weight: bold;
color: white;
background-color: rgba(50, 50, 50, 1.0);
border-radius: 30%;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
display: inline-block;
}
.sign:hover {
background-color: rgba(50, 50, 50, 0.7);
}
.notDisplayed {
visibility: hidden;
/*display: none;*/
}
.displayed {
visibility: visible;
/*display: block;*/
}
<div class="wrap">
<section>
<h2>About us</h2>
<p> Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero.</p>
</section>
<section class="info-about">
<h3>Current projects</h3><span class="sign">+</span>
<p class="notDisplayed">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl sagittis vestibulum. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.</p>
<p class="notDisplayed">Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Aenean viverra rhoncus pede. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut non enim eleifend felis pretium feugiat. Vivamus quis mi. Phasellus a est. Phasellus magna. In hac habitasse platea dictumst. Curabitur at lacus ac velit ornare lobortis. Curabitur a felis in nunc fringilla tristique. Morbi mattis ullamcorper velit. Phasellus gravida semper nisi. Nullam vel sem. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Sed hendrerit. Morbi ac felis. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Nunc nulla. Fusce risus nisl, viverra et, tempor et, pretium in, sapien. Donec venenatis vulputate lorem.</p>
</section>
<section class="info-about">
<h3>Future projects</h3><span class="sign">+</span>
<p class="notDisplayed">Morbi nec metus. Phasellus blandit leo ut odio. Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. In auctor lobortis lacus. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna. Vestibulum ullamcorper mauris at ligula. Fusce fermentum. Nullam cursus lacinia erat. Praesent blandit laoreet nibh. Fusce convallis metus id felis luctus adipiscing. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo. Praesent egestas neque eu enim. In hac habitasse platea dictumst. Fusce a quam. Etiam ut purus mattis mauris sodales aliquam. Curabitur nisi. Quisque malesuada placerat nisl. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Mauris sollicitudin fermentum libero. Praesent nonummy mi in odio. Nunc interdum lacus sit amet orci. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Morbi mollis tellus ac sapien. Phasellus volutpat, metus eget egestas mollis, lacus lacus blandit dui, id egestas quam mauris ut lacus. Fusce vel dui. Sed in libero ut nibh placerat accumsan. Proin faucibus arcu quis ante. In consectetuer turpis ut velit. Nulla sit amet est. Praesent metus tellus, elementum eu, semper a, adipiscing nec, purus. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Suspendisse feugiat. Suspendisse enim turpis, dictum sed, iaculis a, condimentum nec, nisi. Praesent nec nisl a purus blandit viverra. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Fusce pharetra convallis urna. Quisque ut nisi. Donec mi odio, faucibus at, scelerisque quis, convallis in, nisi. Suspendisse non nisl sit amet velit hendrerit rutrum. Ut leo. Ut a nisl id ante tempus hendrerit.</p>
</section>
<section class="info-about">
<h3>Closed projects</h3><span class="sign">+</span>
<p class="notDisplayed">Proin pretium, leo ac pellentesque mollis, felis nunc ultrices eros, sed gravida augue augue mollis justo. Suspendisse eu ligula. Nulla facilisi. Donec id justo. Praesent porttitor, nulla vitae posuere iaculis, arcu nisl dignissim dolor, a pretium mi sem ut ipsum. Curabitur suscipit suscipit tellus. Praesent vestibulum dapibus nibh. Etiam iaculis nunc ac metus. Ut id nisl quis enim dignissim sagittis. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros. Proin magna. Duis vel nibh at velit scelerisque suscipit. Curabitur turpis. Vestibulum suscipit nulla quis orci. Fusce ac felis sit amet ligula pharetra condimentum. Maecenas egestas arcu quis ligula mattis placerat. Duis lobortis massa imperdiet quam. Suspendisse potenti. Pellentesque commodo eros a enim. Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Sed libero. Aliquam erat volutpat. Etiam vitae tortor. Morbi vestibulum volutpat enim. Aliquam eu nunc. Nunc sed turpis. Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nulla porta dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque dapibus hendrerit tortor. Praesent egestas tristique nibh. Sed a libero. Cras varius. Donec vitae orci sed dolor rutrum auctor. Fusce egestas elit eget lorem. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Nam at tortor in tellus interdum sagittis. Aliquam lobortis. Donec orci lectus, aliquam ut, faucibus non, euismod id, nulla. Curabitur blandit mollis lacus. Nam adipiscing. Vestibulum eu odio. Vivamus laoreet. Nullam tincidunt adipiscing enim. Phasellus tempus. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Fusce neque. Suspendisse faucibus, nunc et pellentesque egestas, lacus ante convallis tellus, vitae iaculis lacus elit id tortor. Vivamus aliquet elit ac nisl. Fusce fermentum odio nec arcu. Vivamus euismod mauris. In ut quam vitae odio lacinia tincidunt. Praesent ut ligula non mi varius sagittis. Cras sagittis. Praesent ac sem eget est egestas volutpat. Vivamus consectetuer hendrerit lacus. Cras non dolor. Vivamus in erat ut urna cursus vestibulum. Fusce commodo aliquam arcu. Nam commodo suscipit quam.</p>
<p class="notDisplayed">Quisque id odio. Praesent venenatis metus at tortor pulvinar varius. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus.</p>
</section>
</div>
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>