Related
The data
I have JSON data that I want to use in a PDF-report. The PDF-report is created from HTML.
[
{
"title": "Chapter 1",
"text": "Some large text"
},
{
"title": "Chapter 2",
"text": "Some large text"
}
]
Format of the report page
All pages has the following format.
What I need
I need to add the text within the content of the page. But when the text is exceeding it has to jump to the next page and keeps the same format. Does anyone have an idea how to accomplish this?
Original idea: https://stackoverflow.com/a/56141110/1543677
The idea is to use CSS-columns to auto-break up the content in the appropriate pages. Do note that this will generate duplicate content and useless DOM nodes, so a) don't use it for a website, b) use a lazy-load approach (don't load a whole book at once).
HTML structure:
<div id="content">
</div>
<div id="container">
</div>
CSS:
body{
background:#ccc;
}
p{
margin-top: 0;
}
.page {
background: #fff;
height: 729px;
width: 535px;
padding: 93px 30px 20px 30px;
margin: 0 auto 10px;
position: relative;
}
.pageContent {
height: 719px;
padding: 0px;
/*border: 1px dotted;*/
position: relative;
overflow: hidden;
}
.innerPage{
width: 535px;
height: 719px;
column-fill: auto;
column-gap: 0;
column-width: 535px;
}
.pageHeader{
/*border: 1px dotted;*/
margin: 30px;
padding: 5px 30px 5px 0px;
position: absolute;
top:0;
left:0;
right:0;
font-weight: bold;
}
.pageHeader .pageCounter{
position: absolute;
right: 0;
top: 0;
margin: 5px 0px;
text-align: right;
}
#content {
margin: 20px auto;
width: 535px;
height: 721px;
overflow: auto;
border: 1px solid #ccc;
column-fill: auto;
column-gap: 0;
column-width: 595px;
}
Sample data:
let data=[
{
"title": "Chapter 1",
"text": `<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin urna sapien, ac scelerisque mi vehicula non. Etiam orci elit, volutpat sit amet congue non, blandit quis orci. Aliquam vel nisl commodo, iaculis ante eu, blandit leo. Aliquam id nunc a elit facilisis sodales non vel neque. Curabitur posuere luctus nibh, ac lacinia arcu. Donec tincidunt nunc quis arcu elementum, sed varius lorem rutrum. Donec ligula mauris, malesuada ut facilisis sed, placerat vel orci. Suspendisse et justo quis quam condimentum rhoncus. Quisque fringilla tortor in ipsum maximus, vel molestie ligula suscipit. Donec lobortis diam et elit viverra, non venenatis sapien aliquam. Praesent suscipit libero eu nibh molestie, aliquet feugiat lorem egestas. Vivamus tristique vehicula lobortis. Donec sagittis dolor pretium risus lobortis varius. Vestibulum non leo tempor, finibus quam sodales, sollicitudin augue. Donec at luctus velit.
</p>
<p>
Nam sit amet purus vitae eros cursus semper nec a massa. Aliquam dolor nunc, interdum non ex nec, molestie sagittis felis. Vestibulum diam magna, molestie malesuada nulla vel, pretium lobortis enim. Curabitur consequat nunc quis enim sagittis, vel congue nisl finibus. Fusce ut ex ac nulla vestibulum viverra. Quisque facilisis purus at venenatis efficitur. Nullam maximus quam nec sapien fermentum, ornare volutpat orci rhoncus. Pellentesque cursus molestie sem vel lobortis. Cras iaculis sodales quam, et ornare sapien aliquet quis. Nunc justo felis, mattis auctor lorem id, varius luctus enim. Pellentesque vestibulum facilisis massa quis rutrum. Morbi non erat ac libero pretium ultrices. Donec a eros neque. Phasellus a dolor ullamcorper, euismod sem non, eleifend dolor. Donec iaculis neque in felis imperdiet placerat.
</p>
<p>
Nulla venenatis erat eget turpis sagittis, non suscipit nulla ullamcorper. Aliquam ac erat quis velit sollicitudin mollis. Ut tempus purus odio, id tincidunt purus fringilla nec. Nulla ullamcorper ultricies lorem at euismod. Suspendisse feugiat ex velit, ac sodales mi tempus eget. Suspendisse nec ligula nec nisi eleifend facilisis. Suspendisse neque eros, vestibulum id nisl vel, convallis facilisis nibh. Curabitur nisi neque, pulvinar non feugiat in, tristique sed sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquet nunc ac eros iaculis, et lacinia ex semper. Aenean venenatis varius purus, nec dapibus purus. Donec arcu purus, interdum eget eleifend non, fringilla sed tellus. Duis egestas, sem eget vehicula interdum, ligula magna pellentesque est, nec feugiat purus risus a justo. Donec vehicula viverra purus. Curabitur at commodo elit.
</p>
<p>
Nullam eu libero vulputate purus suscipit gravida. Vestibulum id enim felis. Donec fringilla elit vitae mauris molestie, ac condimentum sem vestibulum. Duis vestibulum ex a porttitor cursus. Ut non augue orci. Etiam accumsan est ut suscipit lobortis. Nulla dolor velit, ultrices eu sollicitudin nec, tincidunt dictum odio. Nam et lacus id elit tincidunt fringilla ut et nulla. Nunc eu elit leo.
</p>
<p>
Suspendisse commodo diam leo, eu consectetur turpis elementum vel. Proin eu hendrerit massa. Quisque commodo ante magna, ac pulvinar dolor consectetur ut. Sed lectus nisi, efficitur in arcu in, pharetra pharetra urna. Cras maximus ultrices convallis. Donec a turpis suscipit, sagittis urna id, aliquet quam. Vestibulum odio metus, lacinia ut hendrerit in, imperdiet quis ex.
</p>
<p>
Morbi ultricies tellus a lacus tempus, et sagittis purus rhoncus. Maecenas consectetur blandit tempus. Curabitur porta ipsum nibh, non pharetra ex semper at. Ut in ex id massa feugiat malesuada ut interdum mauris. Suspendisse potenti. Vestibulum eu maximus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in felis et arcu sodales dapibus quis a augue. Donec quis porta nunc, a euismod risus. Pellentesque id mi viverra, sagittis ex vel, elementum velit. Phasellus at vehicula risus. Sed dignissim, nisi vitae ornare scelerisque, purus nunc imperdiet neque, id facilisis libero nisl non lorem. Duis convallis leo vitae accumsan pellentesque. Donec aliquam ante vel consectetur congue.
</p>
<p>
Etiam facilisis velit velit, nec commodo eros commodo eget. Duis dapibus non erat nec sodales. Curabitur tempus tincidunt lectus, ac facilisis diam porta sed. Nam a dapibus massa, eget consequat risus. Quisque nibh turpis, sollicitudin sed volutpat ut, vestibulum id turpis. Duis pellentesque, nisi vitae vestibulum convallis, leo nibh scelerisque purus, et sagittis tellus nisl maximus tellus. Nulla euismod massa purus, a dictum metus mollis eu.
</p>
<p>
Cras pulvinar sem in nibh varius, vitae viverra risus dapibus. Donec fringilla commodo euismod. Mauris felis augue, malesuada faucibus nibh eget, hendrerit commodo urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit aliquam, tincidunt tortor vitae, convallis massa. Sed lacus quam, mollis in leo a, efficitur venenatis lectus. Maecenas efficitur, metus in auctor tempus, velit nulla sodales odio, vitae tristique felis purus quis erat. Aliquam blandit purus facilisis, iaculis augue nec, ultricies ex. Nunc euismod ipsum arcu, commodo consequat magna blandit nec. Sed mollis porta mi, id sagittis leo accumsan quis. Nam vel odio ut lacus pulvinar placerat. Morbi eu diam sit amet mi molestie lobortis.
</p>
<p>
Morbi ex sem, malesuada a auctor eu, porta a nisi. Cras egestas convallis neque, consectetur tincidunt sapien varius sed. Aliquam vitae odio id purus finibus imperdiet sit amet in turpis. Duis tempor, augue in interdum facilisis, est leo pellentesque dolor, non congue augue risus ac ligula. Pellentesque elementum lacinia massa, in tincidunt ex consequat eu. Cras lobortis nisl id eros cursus, vel auctor tellus aliquam. Cras maximus aliquet vulputate. Fusce elementum vel purus vel tempus. Aenean venenatis dapibus ex sed semper.
</p>
<p>
Donec viverra massa augue. Curabitur ultricies maximus tincidunt. Phasellus eleifend placerat nunc, eu viverra velit efficitur malesuada. Nullam bibendum massa non nisl pretium imperdiet. Cras blandit est turpis, non pharetra sapien lacinia eu. Nulla sodales ornare quam, at mattis nunc scelerisque vel. Praesent varius nibh id mauris laoreet eleifend. Fusce blandit augue vitae lacus laoreet, sit amet consectetur justo tincidunt. Integer vitae orci vulputate, viverra turpis eget, consectetur urna. Proin feugiat diam sem, in commodo ante faucibus sit amet. Quisque imperdiet, ante nec vehicula fringilla, urna mi condimentum enim, a ornare erat lorem sit amet purus.
</p>
<p>
Quisque eu odio ac lectus aliquet eleifend. Quisque varius, libero sed convallis tempus, nisl mi egestas nisi, a efficitur neque est ac augue. Nam pretium interdum ante et pulvinar. Fusce porta tempor leo, quis tincidunt diam tempus nec. Proin egestas vulputate dapibus. Etiam eros nisi, ornare non purus quis, consequat consectetur felis. Aenean non elit at massa vehicula porttitor quis vel nisl. Vestibulum dignissim libero et quam aliquet, vel tristique purus interdum.
</p>
<p>
Cras lacus lacus, euismod in eleifend ut, facilisis ac erat. Morbi eget ligula eget libero mollis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam accumsan aliquam odio sed tempor. Etiam vitae arcu nunc. Mauris odio ipsum, sollicitudin nec lectus in, congue vestibulum lacus. Aliquam porttitor id ex ac rhoncus. Quisque suscipit libero at sapien tincidunt finibus. Nullam quis lacinia ligula. Donec sit amet mauris sem. Proin tempus massa ac mi eleifend, quis vehicula libero placerat. Etiam vel lectus at augue varius eleifend non a ligula. Duis sit amet ex arcu. Nunc sit amet egestas lorem, sit amet malesuada metus.
</p>
<p>
Sed vitae rutrum libero, vel tempor enim. In hac habitasse platea dictumst. Vestibulum semper hendrerit justo ac elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac congue lacus. Proin eleifend enim ut lectus faucibus varius. In vitae euismod nisl. Ut ultricies leo et purus convallis imperdiet. Ut ut massa a nibh placerat porttitor non ut magna. Donec venenatis faucibus mollis. Etiam placerat dui turpis, quis faucibus eros vulputate at.
</p>
<p>
Duis eu justo id ipsum lacinia euismod. In iaculis viverra ipsum id tempus. Ut non luctus tellus, sit amet porta arcu. Quisque sollicitudin porta tortor nec convallis. Donec non diam orci. Nunc sollicitudin viverra dolor sit amet dictum. Quisque venenatis lectus eu urna egestas vehicula. Nam malesuada ipsum non sapien pellentesque congue. Sed id auctor lectus. Sed in quam lectus. Vestibulum accumsan augue ac massa feugiat, eu dignissim justo mattis. Nulla vel sapien eget leo rutrum ultrices.
</p>
<p>
Duis sit amet purus ante. Sed commodo neque felis, ut faucibus lacus porta at. Sed venenatis odio tellus, eget placerat lectus vulputate vel. Maecenas est dui, congue id ultricies non, ornare a urna. Cras laoreet neque velit. Quisque eleifend tellus nunc, a facilisis dui pharetra non. Pellentesque at vehicula nisi. Morbi vel elit dictum, laoreet purus eu, ullamcorper ligula. Maecenas vitae sapien in nulla sagittis laoreet. Phasellus ac velit feugiat, pretium odio a, molestie neque. Nulla in nunc nisl. Quisque congue felis quis quam posuere, sed ultrices lectus suscipit. Donec at ex nec turpis malesuada maximus ac non ex. Sed elementum augue non convallis tempor. Phasellus vel urna placerat, congue urna sit amet, rhoncus justo.
</p>
<p>
Sed venenatis erat sit amet nunc lacinia pulvinar. Vestibulum accumsan sem et augue feugiat sollicitudin. Sed ac augue rhoncus, pellentesque arcu et, consectetur turpis. Pellentesque tristique, enim nec malesuada consectetur, libero diam tristique urna, vel sagittis lacus eros nec enim. Cras hendrerit vitae lorem consectetur laoreet. Sed sit amet tortor magna. Mauris sagittis massa tortor, non efficitur mauris dictum eu. Proin blandit, massa quis malesuada feugiat, felis ligula semper felis, id semper mauris sapien quis velit. Ut pellentesque, massa in laoreet rutrum, turpis felis sodales risus, eget vulputate nulla massa et erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id elementum tellus.
</p>
<p>
Pellentesque arcu quam, fringilla in purus et, aliquam ultrices odio. Proin mauris magna, cursus in pellentesque ut, luctus a purus. Nunc aliquam nulla nec justo pretium porta. Integer vehicula sit amet leo nec aliquam. Donec eu malesuada dolor. Curabitur diam magna, gravida vitae sollicitudin eu, laoreet ut justo. Pellentesque porta laoreet urna, nec varius tortor tincidunt sed. Nullam arcu odio, ultrices a felis nec, imperdiet convallis nisi. Fusce aliquet nisi quam, nec bibendum orci consequat at. Sed nec augue id leo rutrum tempor vel sit amet augue. Etiam massa nibh, lobortis sed urna sed, eleifend finibus nulla. Aenean id vehicula dui.
</p>
<p>
Ut fermentum neque justo, ut tempor turpis mattis sit amet. Nam fringilla placerat viverra. Morbi interdum varius tristique. Phasellus tellus purus, imperdiet non felis eu, aliquam tristique urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique in mauris eu tempor. Etiam tempus nisi mauris, eu volutpat risus suscipit non. Sed eu odio mi. Praesent ac sapien sed diam cursus auctor sed non sapien. Phasellus et aliquet quam. Suspendisse ultrices diam nec varius rutrum. Morbi vehicula ac ex sit amet rutrum. Etiam eget felis placerat, auctor eros eget, aliquet turpis. Mauris facilisis rutrum tempus. Fusce dolor leo, varius eget faucibus sit amet, volutpat sit amet nisl.
</p>
<p>
Vestibulum sit amet nunc et leo accumsan viverra tincidunt et diam. Proin dolor quam, euismod non suscipit eu, vulputate a nulla. Duis convallis justo id vehicula dictum. Sed fringilla elit nec nulla consequat, et euismod justo varius. Vestibulum semper urna ut accumsan porttitor. Pellentesque lobortis pretium tristique. Fusce tempus sapien eget imperdiet egestas. Sed sit amet diam sed felis placerat sollicitudin. Donec est metus, condimentum dapibus leo non, pharetra pharetra leo.
</p>
<p>
Curabitur condimentum gravida nibh, id aliquet turpis fringilla a. Nullam nec neque efficitur, sodales arcu in, tincidunt ante. In non augue urna. Sed sit amet erat justo. Maecenas nec convallis ex. Sed nisl purus, posuere ut nisi sit amet, efficitur placerat ex. Aliquam hendrerit dui sed lectus sagittis, id hendrerit urna dignissim. Vivamus dolor lorem, iaculis et purus nec, vehicula aliquet neque. Proin lobortis fringilla risus quis consequat. Aenean ultricies sapien et ipsum dignissim, nec egestas tortor feugiat. Suspendisse lectus quam, molestie id lacus convallis, egestas vulputate enim. Aliquam ac venenatis turpis. Praesent consequat mollis est, at gravida libero eleifend sit amet. Vivamus et quam augue.
</p>`
},
{
"title": "Chapter 2",
"text": `
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin urna sapien, ac scelerisque mi vehicula non. Etiam orci elit, volutpat sit amet congue non, blandit quis orci. Aliquam vel nisl commodo, iaculis ante eu, blandit leo. Aliquam id nunc a elit facilisis sodales non vel neque. Curabitur posuere luctus nibh, ac lacinia arcu. Donec tincidunt nunc quis arcu elementum, sed varius lorem rutrum. Donec ligula mauris, malesuada ut facilisis sed, placerat vel orci. Suspendisse et justo quis quam condimentum rhoncus. Quisque fringilla tortor in ipsum maximus, vel molestie ligula suscipit. Donec lobortis diam et elit viverra, non venenatis sapien aliquam. Praesent suscipit libero eu nibh molestie, aliquet feugiat lorem egestas. Vivamus tristique vehicula lobortis. Donec sagittis dolor pretium risus lobortis varius. Vestibulum non leo tempor, finibus quam sodales, sollicitudin augue. Donec at luctus velit.
</p>
<p>
Nam sit amet purus vitae eros cursus semper nec a massa. Aliquam dolor nunc, interdum non ex nec, molestie sagittis felis. Vestibulum diam magna, molestie malesuada nulla vel, pretium lobortis enim. Curabitur consequat nunc quis enim sagittis, vel congue nisl finibus. Fusce ut ex ac nulla vestibulum viverra. Quisque facilisis purus at venenatis efficitur. Nullam maximus quam nec sapien fermentum, ornare volutpat orci rhoncus. Pellentesque cursus molestie sem vel lobortis. Cras iaculis sodales quam, et ornare sapien aliquet quis. Nunc justo felis, mattis auctor lorem id, varius luctus enim. Pellentesque vestibulum facilisis massa quis rutrum. Morbi non erat ac libero pretium ultrices. Donec a eros neque. Phasellus a dolor ullamcorper, euismod sem non, eleifend dolor. Donec iaculis neque in felis imperdiet placerat.
</p>
<p>
Nulla venenatis erat eget turpis sagittis, non suscipit nulla ullamcorper. Aliquam ac erat quis velit sollicitudin mollis. Ut tempus purus odio, id tincidunt purus fringilla nec. Nulla ullamcorper ultricies lorem at euismod. Suspendisse feugiat ex velit, ac sodales mi tempus eget. Suspendisse nec ligula nec nisi eleifend facilisis. Suspendisse neque eros, vestibulum id nisl vel, convallis facilisis nibh. Curabitur nisi neque, pulvinar non feugiat in, tristique sed sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquet nunc ac eros iaculis, et lacinia ex semper. Aenean venenatis varius purus, nec dapibus purus. Donec arcu purus, interdum eget eleifend non, fringilla sed tellus. Duis egestas, sem eget vehicula interdum, ligula magna pellentesque est, nec feugiat purus risus a justo. Donec vehicula viverra purus. Curabitur at commodo elit.
</p>
<p>
Nullam eu libero vulputate purus suscipit gravida. Vestibulum id enim felis. Donec fringilla elit vitae mauris molestie, ac condimentum sem vestibulum. Duis vestibulum ex a porttitor cursus. Ut non augue orci. Etiam accumsan est ut suscipit lobortis. Nulla dolor velit, ultrices eu sollicitudin nec, tincidunt dictum odio. Nam et lacus id elit tincidunt fringilla ut et nulla. Nunc eu elit leo.
</p>
<p>
Suspendisse commodo diam leo, eu consectetur turpis elementum vel. Proin eu hendrerit massa. Quisque commodo ante magna, ac pulvinar dolor consectetur ut. Sed lectus nisi, efficitur in arcu in, pharetra pharetra urna. Cras maximus ultrices convallis. Donec a turpis suscipit, sagittis urna id, aliquet quam. Vestibulum odio metus, lacinia ut hendrerit in, imperdiet quis ex.
</p>
<p>
Morbi ultricies tellus a lacus tempus, et sagittis purus rhoncus. Maecenas consectetur blandit tempus. Curabitur porta ipsum nibh, non pharetra ex semper at. Ut in ex id massa feugiat malesuada ut interdum mauris. Suspendisse potenti. Vestibulum eu maximus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in felis et arcu sodales dapibus quis a augue. Donec quis porta nunc, a euismod risus. Pellentesque id mi viverra, sagittis ex vel, elementum velit. Phasellus at vehicula risus. Sed dignissim, nisi vitae ornare scelerisque, purus nunc imperdiet neque, id facilisis libero nisl non lorem. Duis convallis leo vitae accumsan pellentesque. Donec aliquam ante vel consectetur congue.
</p>
<p>
Etiam facilisis velit velit, nec commodo eros commodo eget. Duis dapibus non erat nec sodales. Curabitur tempus tincidunt lectus, ac facilisis diam porta sed. Nam a dapibus massa, eget consequat risus. Quisque nibh turpis, sollicitudin sed volutpat ut, vestibulum id turpis. Duis pellentesque, nisi vitae vestibulum convallis, leo nibh scelerisque purus, et sagittis tellus nisl maximus tellus. Nulla euismod massa purus, a dictum metus mollis eu.
</p>
<p>
Cras pulvinar sem in nibh varius, vitae viverra risus dapibus. Donec fringilla commodo euismod. Mauris felis augue, malesuada faucibus nibh eget, hendrerit commodo urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit aliquam, tincidunt tortor vitae, convallis massa. Sed lacus quam, mollis in leo a, efficitur venenatis lectus. Maecenas efficitur, metus in auctor tempus, velit nulla sodales odio, vitae tristique felis purus quis erat. Aliquam blandit purus facilisis, iaculis augue nec, ultricies ex. Nunc euismod ipsum arcu, commodo consequat magna blandit nec. Sed mollis porta mi, id sagittis leo accumsan quis. Nam vel odio ut lacus pulvinar placerat. Morbi eu diam sit amet mi molestie lobortis.
</p>
<p>
Morbi ex sem, malesuada a auctor eu, porta a nisi. Cras egestas convallis neque, consectetur tincidunt sapien varius sed. Aliquam vitae odio id purus finibus imperdiet sit amet in turpis. Duis tempor, augue in interdum facilisis, est leo pellentesque dolor, non congue augue risus ac ligula. Pellentesque elementum lacinia massa, in tincidunt ex consequat eu. Cras lobortis nisl id eros cursus, vel auctor tellus aliquam. Cras maximus aliquet vulputate. Fusce elementum vel purus vel tempus. Aenean venenatis dapibus ex sed semper.
</p>
<p>
Donec viverra massa augue. Curabitur ultricies maximus tincidunt. Phasellus eleifend placerat nunc, eu viverra velit efficitur malesuada. Nullam bibendum massa non nisl pretium imperdiet. Cras blandit est turpis, non pharetra sapien lacinia eu. Nulla sodales ornare quam, at mattis nunc scelerisque vel. Praesent varius nibh id mauris laoreet eleifend. Fusce blandit augue vitae lacus laoreet, sit amet consectetur justo tincidunt. Integer vitae orci vulputate, viverra turpis eget, consectetur urna. Proin feugiat diam sem, in commodo ante faucibus sit amet. Quisque imperdiet, ante nec vehicula fringilla, urna mi condimentum enim, a ornare erat lorem sit amet purus.
</p>
<p>
Quisque eu odio ac lectus aliquet eleifend. Quisque varius, libero sed convallis tempus, nisl mi egestas nisi, a efficitur neque est ac augue. Nam pretium interdum ante et pulvinar. Fusce porta tempor leo, quis tincidunt diam tempus nec. Proin egestas vulputate dapibus. Etiam eros nisi, ornare non purus quis, consequat consectetur felis. Aenean non elit at massa vehicula porttitor quis vel nisl. Vestibulum dignissim libero et quam aliquet, vel tristique purus interdum.
</p>
<p>
Cras lacus lacus, euismod in eleifend ut, facilisis ac erat. Morbi eget ligula eget libero mollis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam accumsan aliquam odio sed tempor. Etiam vitae arcu nunc. Mauris odio ipsum, sollicitudin nec lectus in, congue vestibulum lacus. Aliquam porttitor id ex ac rhoncus. Quisque suscipit libero at sapien tincidunt finibus. Nullam quis lacinia ligula. Donec sit amet mauris sem. Proin tempus massa ac mi eleifend, quis vehicula libero placerat. Etiam vel lectus at augue varius eleifend non a ligula. Duis sit amet ex arcu. Nunc sit amet egestas lorem, sit amet malesuada metus.
</p>
<p>
Sed vitae rutrum libero, vel tempor enim. In hac habitasse platea dictumst. Vestibulum semper hendrerit justo ac elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac congue lacus. Proin eleifend enim ut lectus faucibus varius. In vitae euismod nisl. Ut ultricies leo et purus convallis imperdiet. Ut ut massa a nibh placerat porttitor non ut magna. Donec venenatis faucibus mollis. Etiam placerat dui turpis, quis faucibus eros vulputate at.
</p>
<p>
Duis eu justo id ipsum lacinia euismod. In iaculis viverra ipsum id tempus. Ut non luctus tellus, sit amet porta arcu. Quisque sollicitudin porta tortor nec convallis. Donec non diam orci. Nunc sollicitudin viverra dolor sit amet dictum. Quisque venenatis lectus eu urna egestas vehicula. Nam malesuada ipsum non sapien pellentesque congue. Sed id auctor lectus. Sed in quam lectus. Vestibulum accumsan augue ac massa feugiat, eu dignissim justo mattis. Nulla vel sapien eget leo rutrum ultrices.
</p>
<p>
Duis sit amet purus ante. Sed commodo neque felis, ut faucibus lacus porta at. Sed venenatis odio tellus, eget placerat lectus vulputate vel. Maecenas est dui, congue id ultricies non, ornare a urna. Cras laoreet neque velit. Quisque eleifend tellus nunc, a facilisis dui pharetra non. Pellentesque at vehicula nisi. Morbi vel elit dictum, laoreet purus eu, ullamcorper ligula. Maecenas vitae sapien in nulla sagittis laoreet. Phasellus ac velit feugiat, pretium odio a, molestie neque. Nulla in nunc nisl. Quisque congue felis quis quam posuere, sed ultrices lectus suscipit. Donec at ex nec turpis malesuada maximus ac non ex. Sed elementum augue non convallis tempor. Phasellus vel urna placerat, congue urna sit amet, rhoncus justo.
</p>
<p>
Sed venenatis erat sit amet nunc lacinia pulvinar. Vestibulum accumsan sem et augue feugiat sollicitudin. Sed ac augue rhoncus, pellentesque arcu et, consectetur turpis. Pellentesque tristique, enim nec malesuada consectetur, libero diam tristique urna, vel sagittis lacus eros nec enim. Cras hendrerit vitae lorem consectetur laoreet. Sed sit amet tortor magna. Mauris sagittis massa tortor, non efficitur mauris dictum eu. Proin blandit, massa quis malesuada feugiat, felis ligula semper felis, id semper mauris sapien quis velit. Ut pellentesque, massa in laoreet rutrum, turpis felis sodales risus, eget vulputate nulla massa et erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id elementum tellus.
</p>
<p>
Pellentesque arcu quam, fringilla in purus et, aliquam ultrices odio. Proin mauris magna, cursus in pellentesque ut, luctus a purus. Nunc aliquam nulla nec justo pretium porta. Integer vehicula sit amet leo nec aliquam. Donec eu malesuada dolor. Curabitur diam magna, gravida vitae sollicitudin eu, laoreet ut justo. Pellentesque porta laoreet urna, nec varius tortor tincidunt sed. Nullam arcu odio, ultrices a felis nec, imperdiet convallis nisi. Fusce aliquet nisi quam, nec bibendum orci consequat at. Sed nec augue id leo rutrum tempor vel sit amet augue. Etiam massa nibh, lobortis sed urna sed, eleifend finibus nulla. Aenean id vehicula dui.
</p>
<p>
Ut fermentum neque justo, ut tempor turpis mattis sit amet. Nam fringilla placerat viverra. Morbi interdum varius tristique. Phasellus tellus purus, imperdiet non felis eu, aliquam tristique urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique in mauris eu tempor. Etiam tempus nisi mauris, eu volutpat risus suscipit non. Sed eu odio mi. Praesent ac sapien sed diam cursus auctor sed non sapien. Phasellus et aliquet quam. Suspendisse ultrices diam nec varius rutrum. Morbi vehicula ac ex sit amet rutrum. Etiam eget felis placerat, auctor eros eget, aliquet turpis. Mauris facilisis rutrum tempus. Fusce dolor leo, varius eget faucibus sit amet, volutpat sit amet nisl.
</p>
<p>
Vestibulum sit amet nunc et leo accumsan viverra tincidunt et diam. Proin dolor quam, euismod non suscipit eu, vulputate a nulla. Duis convallis justo id vehicula dictum. Sed fringilla elit nec nulla consequat, et euismod justo varius. Vestibulum semper urna ut accumsan porttitor. Pellentesque lobortis pretium tristique. Fusce tempus sapien eget imperdiet egestas. Sed sit amet diam sed felis placerat sollicitudin. Donec est metus, condimentum dapibus leo non, pharetra pharetra leo.
</p>
`
}
];
JS:
function generatePages(){
const pageWidth = 535;
const content = document.getElementById('content');
const container = document.getElementById('container');
let counter=1;
for (let i=0;i<data.length;i++){
content.innerHTML=data[i].text;
let totalWidth = content.scrollWidth;
let totalPages = totalWidth / pageWidth;
for (let p = 0; p < totalPages; p++) {
let pageHeader = document.createElement('div');
pageHeader.innerHTML = data[i].title;
pageHeader.className = 'pageHeader';
let pageCounter = document.createElement('span');
pageCounter.innerHTML = "p. "+counter;
pageCounter.className='pageCounter';
pageHeader.appendChild(pageCounter);
let innerPage = document.createElement('div');
innerPage.innerHTML = data[i].text;
innerPage.className = 'innerPage';
innerPage.style.cssText = `
width: ${totalWidth}px;
transform: translateX(-${p * pageWidth}px);
`;
const pageContent = document.createElement('div');
pageContent.className = 'pageContent';
pageContent.appendChild(innerPage);
const page = document.createElement('div');
page.className = 'page';
page.appendChild(pageHeader);
page.appendChild(pageContent);
container.appendChild(page);
counter++;
}
}
content.remove();
}
generatePages();
Fiddle: https://jsfiddle.net/xsyb7h9g/
There is a new element in HTML5 that is similar to iframe, but it is more useful and you can use it to read pdf:
<embed src="Your link" type="application/pdf">
For more information about this element, you can read This passage
Also, I write a similar pdf-like page, the script may have small problems, but it can scroll.
<body style="background:rgba(100,100,100,0.5);">
<button style="position:fixed; width:20; height:20; left:80%; top:10%" onclick="Ms()">
X
</button>
<p style="position:fixed; width:60%; height:80%; left:20%; top:10% ;overflow:scroll; background:rgba(100,100,100,0.8)" id="p1">
test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>
</p>
<!--script language="javascript">
function close()
{
document.getElementById("p1").display: none;
}
</script-->
<script language="javascript">
function Ms() //声明标识符
{
//document.getElementById("p1").visibility=hidden;
document.getElementById("p1").innerHTML="I do not know why it can not be hidden.";
}
I want to make this image to be on the bottom of this section (section 18) of one page website (which has 21 section) for all devices heights using jQuery.
I made it by using position: absolute etc. but just on my screen size. When I check that on other devices that have different heights, it's not stuck to the bottom.
You can try this.
.imagebottom{
position:fixed;
bottom:0px;
left:50%;
}
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<img src="https://i.stack.imgur.com/igp05.png" class="imagebottom"/>
Use position: sticky instead of position: fixed. A sticky element always sticks to its nearest ancestor element which in your case is the 18th section of your website.
.imagebottom{
position: sticky;
bottom:0px;
height: 50px;
}
<div>
<h2>Section 17</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
<br />
<hr />
<br />
<div>
<h2>Section 18</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</p>
<img src="https://i.stack.imgur.com/igp05.png" class="imagebottom"/>
</div>
<br />
<hr />
<br />
<div>
<h2>Section 19</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et urna enim. Nunc ac ligula sed augue vehicula consectetur a quis justo. Pellentesque viverra nisi turpis, convallis interdum ex lobortis nec. Fusce eget sem pellentesque, sagittis metus sed, euismod diam. Donec pharetra sed neque eget eleifend. Sed varius ultricies orci, vel volutpat massa hendrerit vel. Curabitur euismod tempor porta. Nulla at ligula id quam elementum vulputate. Nullam blandit sem in congue tincidunt. Etiam at vehicula ante. Suspendisse nec pulvinar libero. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean dignissim neque et arcu convallis dictum ac in lectus. Etiam maximus felis eget arcu maximus, non lacinia massa scelerisque. In mollis eros vel ex blandit, eget vestibulum quam facilisis. Sed vulputate porta pharetra. Quisque id sapien nec urna iaculis porttitor sit amet in nibh. Integer vel nisl sit amet arcu dictum auctor. Maecenas condimentum nulla vel maximus ullamcorper. Morbi malesuada, lacus non pellentesque condimentum, magna odio accumsan nisi, nec mollis nunc nibh at orci. Nulla venenatis ante quis eros fermentum, eget maximus risus ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque commodo neque et neque ultricies venenatis. Morbi justo ligula, sodales a molestie a, elementum ac quam. Sed a dui ac lacus mattis vestibulum id non ante. Phasellus efficitur vehicula pellentesque. Phasellus id porta risus, eget posuere libero. Praesent tristique tortor vel nunc aliquam, lacinia finibus augue mollis. Ut condimentum sollicitudin metus, id lacinia odio cursus ut. Integer iaculis tempor nulla vel posuere.
Etiam non erat velit. Mauris ac sodales orci. Etiam posuere quam et gravida cursus. Mauris lacinia auctor ipsum in vehicula. Sed quis dictum enim. Ut eleifend erat sit amet est egestas, nec consequat orci laoreet. Suspendisse potenti. Etiam egestas quam ut augue efficitur, in sagittis quam tempor. Suspendisse sagittis blandit elit at pretium. Ut turpis dolor, lacinia sit amet ex id, ultricies pretium dui. Pellentesque posuere nec elit nec sagittis. Ut ut efficitur nisl. Nam placerat arcu eros, a facilisis massa elementum et. Maecenas et gravida nunc.
Vestibulum metus urna, placerat ac iaculis at, blandit vitae ante. Ut porta bibendum massa, varius rhoncus odio. Proin libero tortor, tincidunt sit amet mi nec, aliquam fermentum augue. Praesent sed efficitur metus. Phasellus accumsan, velit vel ornare auctor, nisi diam condimentum risus, sit amet ultricies est lacus vitae lectus. Etiam mattis lectus eu nunc lobortis efficitur. Nunc dui mauris, iaculis vitae dignissim in, ullamcorper vel odio. Sed gravida enim eu ex scelerisque, ut sagittis lacus ullamcorper. Fusce aliquet maximus lorem laoreet posuere. Nam tristique nisi ullamcorper felis tempus pulvinar.
</div>
I'm trying to replicate the mouse pointer effect from this page but I cannot reach the same incredible fluidity.
I've developed a code (jsfiddle here) thanks to this and this tutorials.
//Ombra Cursore Mouse
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
$(window).scroll(function(event) {
if (lastScrolledLeft != $(document).scrollLeft()) {
lastScrolledLeft = $(document).scrollLeft();
}
if (lastScrolledTop != $(document).scrollTop()) {
lastScrolledTop = $(document).scrollTop();
}
});
$(document)
.mousemove(function(e) {
setTimeout(function() {
$('.cursor')
.eq(0)
.css({
left: e.clientX + lastScrolledLeft,
top: e.clientY + lastScrolledTop
});
}, 100);
});
.cursor {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #E74C3C;
z-index: 10000;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce
faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque
erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus
dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet.
Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat.
Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus,
imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis
sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris
ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras
id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus
quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada
molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et
odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget
augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur
lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer
vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis
metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur
eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies.
Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor.
Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis.
Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend
lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices
dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget
elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum
nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis
sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus
nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat
dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis
faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor
urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt,
ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur
venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet
ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis
varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada
quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies
fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis
blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at
magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus.
Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum
mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in
risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo
egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget
hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit
suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc
vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent
sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum
ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus
hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque
tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula
quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis,
cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus
tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem
interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet
neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis
justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec
arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget.
Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non
est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi
massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu
sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem.
Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue
neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor
pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna
eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec,
accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales.
Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque
nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur
pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin
erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum.
Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo
egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam.
Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis
a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer
et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque
ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien
in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim.
Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies
quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie.
Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices.
Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta
magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non
nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum.
</p>
With only the first tutorial, there is a scroll issue because, when i scroll the page, the e.clientX/Y not recognise the new mouse position.
As next step, I've used e.pageX/Y and it works but it is not fluid, so I've used the second tutorial to get more fluidity by replacing the e.pageX/Y with the coordinates get on gap scrolling.
Any suggest to increase the fluidity and let the cursor not stucks in his position when scrolling?
Many Thanks!
Why don't make the cursor position: fixed; and listen to the mousemove from body?
//Ombra Cursore Mouse
var lastScrolledLeft = 0;
var lastScrolledTop = 0;
$(window).scroll(function(event) {
if (lastScrolledLeft != $(document).scrollLeft()) {
lastScrolledLeft = $(document).scrollLeft();
}
if (lastScrolledTop != $(document).scrollTop()) {
lastScrolledTop = $(document).scrollTop();
}
});
$('body')
.mousemove(function(e) {
setTimeout(function() {
$('.cursor')
.eq(0)
.css({
left: e.clientX ,
top: e.clientY
});
}, 100);
});
.cursor {
position: fixed;
height: 10px;
width: 10px;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #E74C3C;
z-index: 10000;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cursor"></div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce
faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque
erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus
dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet.
Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat.
Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus,
imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis
sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris
ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras
id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus
quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada
molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et
odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget
augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur
lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer
vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis
metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur
eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies.
Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor.
Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis.
Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend
lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices
dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget
elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum
nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis
sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus
nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat
dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis
faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor
urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt,
ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur
venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet
ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis
varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada
quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies
fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis
blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at
magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus.
Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum
mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in
risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo
egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget
hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit
suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc
vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent
sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum
ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus
hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque
tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula
quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis,
cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus
tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem
interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet
neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis
justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec
arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget.
Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non
est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi
massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam. Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu
sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem.
Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue
neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor
pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna
eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim. Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec,
accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales.
Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie. Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque
nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices. Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur
pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin
erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum.
Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus imperdiet erat a bibendum blandit. Nullam vitae mauris vel urna tempus hendrerit. Phasellus et odio est. Mauris a felis vel justo
egestas dictum. Donec ultricies fermentum mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ac nisl a libero scelerisque blandit. Nam neque tortor, bibendum eget augue et, accumsan faucibus quam.
Aenean sed magna quis libero facilisis blandit ut at enim. Fusce faucibus porttitor arcu sit amet finibus. Maecenas fermentum nulla non erat cursus laoreet. Nullam erat arcu, volutpat ac ligula quis, tempus consectetur lorem. Aenean pellentesque felis
a nisi viverra dictum. Curabitur at magna accumsan, scelerisque erat non, suscipit lorem. Aenean consectetur sem facilisis sem aliquet imperdiet. Aliquam mauris elit, finibus in tortor quis, cursus euismod urna. Integer vitae ultricies dui. Integer
et nibh non nulla elementum finibus. Pellentesque ultricies dapibus dolor, consequat congue neque pharetra ac. Nam mollis risus nunc, ut accumsan diam semper quis. Aenean luctus magna ac tellus tempus auctor. Donec quis metus rhoncus, sollicitudin neque
ac, maximus felis. Aliquam interdum mi ac sem gravida aliquet. Sed porttitor porttitor pharetra. Nunc diam sapien, consequat dapibus tincidunt in, pellentesque id est. Morbi in dui ac lorem interdum feugiat. Curabitur eget justo fermentum, mattis sapien
in, malesuada dolor. Praesent in risus in metus iaculis volutpat. Nam venenatis, magna eu dignissim vehicula, elit felis faucibus odio, eget interdum lorem justo eu elit. Nunc imperdiet neque ut mollis ultricies. Vestibulum viverra vel magna a dignissim.
Nunc sed enim at massa commodo egestas. Nam id odio cursus, imperdiet magna nec, accumsan est. Aliquam vulputate tempor urna interdum rutrum. Nulla facilisi. Integer sed convallis justo. Sed a vestibulum dolor. Morbi nec dui a lectus viverra ultricies
quis ut risus. Quisque eget hendrerit tortor. Morbi lobortis sagittis sodales. Quisque ultricies, diam ut ornare tincidunt, ante tellus ornare neque, eget faucibus erat enim nec arcu. Nam nec lobortis turpis. Curabitur molestie euismod tellus ac molestie.
Proin malesuada suscipit suscipit. Nulla imperdiet mauris ullamcorper, scelerisque nibh lacinia, hendrerit justo. Curabitur venenatis odio lorem, ac bibendum sem rutrum eget. Sed nec finibus nisi, eu eleifend lacus. Vestibulum varius pulvinar ultrices.
Suspendisse egestas nunc vel fringilla efficitur. Cras id eleifend arcu. Curabitur pellentesque scelerisque mi, sit amet ultrices tortor imperdiet a. Vestibulum ut dolor non est viverra rhoncus. Morbi ultrices dolor at erat pharetra, dignissim porta
magna ultrices. Praesent sapien dui, sagittis eget tellus quis, tincidunt sollicitudin erat. Morbi commodo, dolor id mollis varius, lacus quam tincidunt odio, ut sagittis nisi massa sed quam. In eget est eget elit sollicitudin sollicitudin. Sed non
nisl sed ipsum eleifend interdum ac quis enim. Nulla malesuada molestie sapien et fermentum. Nullam eu dui pretium, malesuada quam ut, hendrerit ipsum.
</p>
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 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>