Jquery long paragraph show more/show less link not working - javascript

I was trying to code this and the "read more" link is working fine but "show less" link is not. I am unable to detect the error.
Here in this code there is an anchor tag with class="show-less" using which i am trying to hide span element with class="spanTxt" but something is wrong and its not hiding span element.
I am not getting it, if i can do display:inline in read more link then why it's not working when i do display:none in show less link.
Thanks in advance :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Add Read More Link</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).replaceWith('<p class="show-read-more">'+newStr+'<a class="read-more" href="#">read more...</a>'+'<span id="hoja" class="spanTxt" style="display:none">'+removedStr+'</span>'+'</p>');
}
});
$(".read-more").click(function(){
$(".spanTxt").css("display","inline");
$(".show-read-more").append('show less...');
$(this).hide();
});
$(".show-less").click(function(){
$(".spanTxt").css("display","none");
});
});
</script>
<style type="text/css">
</style>
</head>
<body>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc
dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus
fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam,
laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit
nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus
erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum.
Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante
sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
us et metus semper porttitor. Sed pellentesque ex at
pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus
hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis.
Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
nteger eu dignissim lectus, commodo eff
icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
Etiam scelerisque nisi magna. Nulla facilisi.
Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
</body>
</html>


You've got several issues there (some caused the code not to work, some caused the work to work but only for the first p.show-read-more element.
Here is the fix:
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if ($.trim(myStr).length > maxLength) {
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
var newP = $('<p class="show-read-more">'+newStr+'<a class="read-more" href="#">read more...</a>'+'<span id="hoja" class="spanTxt" style="display:none">'+removedStr+'</span>'+'</p>')
newP.append($('show less...').hide())
$(this).replaceWith(newP);
}
});
$(".read-more").click(function(){
$(this).parent('.show-read-more').find('.spanTxt').css("display","inline");
$(this).parent('.show-read-more').find('.show-less').show();
$(this).hide();
});
$(document).on('click', '.show-less', function(){
$(this).parent('.show-read-more').find('.read-more').show();
$(this).parent('.show-read-more').find(".spanTxt").hide();
$(this).hide();
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc
dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus
fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam,
laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit
nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus
erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum.
Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante
sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
us et metus semper porttitor. Sed pellentesque ex at
pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus
hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis.
Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
nteger eu dignissim lectus, commodo eff
icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
Etiam scelerisque nisi magna. Nulla facilisi.
Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc
dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus
fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam,
laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit
nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus
erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Eti
am tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum.
Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam p
osuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante
sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lac
us et metus semper porttitor. Sed pellentesque ex at
pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante
commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus digni
ssim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpi
s. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac
lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus
hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis.
Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. I
nteger eu dignissim lectus, commodo eff
icitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus
andit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euis
mod, elit elit tincidunt sem, ut consectetur arcu massa non diam.
Etiam scelerisque nisi magna. Nulla facilisi.
Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>


You have not added an ending for $(document).ready(function(){, in the end of your script. Else the javascript will throw errors.

Related

Changing css property with onscroll

how do I change css property like background color onscroll using JavaScript.
window.onscroll = () =>{
if(document.body.scrollTop = 30){
document.body.style.backgroundColor = "grey"}
else{document.body.style.backgroundColor = "white"}
}

You want to add a listener to you window object for the "scroll" event, in the handler you can use window.scrollY value in order to know how much page is scrolled.
window.addEventListener("scroll", () =>{
if(window.scrollY > 30){
document.body.style.backgroundColor = "grey"}
else{
document.body.style.backgroundColor = "white"
}
})
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in egestas lectus, non porta nunc. Vivamus id pharetra purus. Vivamus semper pellentesque dui. Duis cursus fermentum nunc, et tempor leo imperdiet luctus. Fusce a nibh id felis faucibus feugiat a eget diam. Fusce ante ex, aliquam at velit eget, aliquet laoreet ipsum. Quisque iaculis fermentum consectetur. Etiam facilisis nec nisl sit amet eleifend. Aliquam erat volutpat. Quisque varius libero sed nunc lacinia gravida. Vestibulum at ex ac magna vehicula lobortis. Morbi rhoncus massa non ligula pulvinar dictum. Curabitur turpis libero, maximus eget pharetra non, luctus id orci. Integer id augue id diam ultrices dignissim.
Quisque et ante vel orci auctor imperdiet ac ut nisi. Ut sollicitudin at neque in imperdiet. Quisque eu laoreet nisi. Duis id venenatis diam, in lacinia erat. Quisque ullamcorper fringilla mauris, vel iaculis augue iaculis ac. Mauris luctus, quam vel dignissim accumsan, sem libero sollicitudin justo, et condimentum augue lectus vel nibh. Aliquam sit amet dolor vel urna malesuada sagittis id quis ipsum. Vivamus ut arcu porta, auctor massa ac, suscipit tortor. Mauris in bibendum sapien. Sed quam dui, aliquam nec tellus tincidunt, vehicula vestibulum nunc. Donec aliquet tempor diam nec convallis. Integer a leo vitae nunc porta venenatis ac eu arcu. Aliquam erat volutpat. Phasellus quis urna neque. In dapibus purus sit amet lectus finibus pellentesque. Vivamus viverra sed enim pharetra dapibus.
In accumsan mollis interdum. Phasellus pulvinar purus nec libero porttitor, ut sollicitudin arcu consectetur. Nullam justo mi, feugiat sit amet sollicitudin volutpat, commodo id metus. Donec vitae sem eu lorem consectetur lacinia. Fusce consequat erat id metus pharetra, quis interdum purus bibendum. Phasellus justo magna, imperdiet non nulla id, porta aliquet ante. Nam dignissim diam ut quam eleifend convallis. Phasellus tincidunt odio urna, a pharetra magna blandit eleifend. Integer euismod nisl pellentesque magna varius sodales. Vestibulum consequat sagittis bibendum. Ut cursus, velit quis suscipit auctor, felis urna iaculis eros, nec finibus augue ligula eu ex. Ut nec sapien nulla. Integer blandit mattis venenatis. Donec convallis luctus odio, a mattis massa varius vehicula. Aliquam a semper tortor. Phasellus nec purus id purus fringilla sodales.
Aliquam erat volutpat. Nulla feugiat rhoncus pulvinar. Pellentesque quis nunc dignissim, gravida ipsum sed, venenatis tellus. Quisque ultricies ipsum eget odio tempus, nec aliquam tellus sodales. Ut vitae ultricies diam. Duis iaculis diam venenatis nulla hendrerit efficitur. Sed aliquet faucibus finibus. Suspendisse cursus scelerisque placerat. Aenean laoreet a ipsum et viverra.
Integer non nisl accumsan, vestibulum enim ac, auctor purus. Vivamus eget condimentum nulla. Nunc faucibus elementum arcu, sed pretium augue posuere vitae. Suspendisse maximus dapibus enim, et dictum nisl imperdiet a. Aliquam a laoreet tortor, vel placerat felis. Fusce tristique orci ligula, et tincidunt odio sagittis eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin aliquam, dolor at posuere facilisis, neque leo imperdiet arcu, sit amet sollicitudin mi nibh id erat. Quisque sit amet lectus quis lectus aliquam ullamcorper varius id turpis. Vestibulum nec velit quis justo facilisis ullamcorper at vel neque. Donec sodales varius leo non vehicula. Proin sed molestie velit. Pellentesque ac porttitor eros. Sed at ullamcorper dolor.
Sed consequat viverra ex, eu pretium velit vehicula et. Donec vestibulum commodo leo id molestie. Praesent pharetra eros ac leo aliquam, sit amet interdum sem mattis. Ut tincidunt condimentum mauris, et sollicitudin felis. Aenean volutpat dapibus diam a fringilla. Sed iaculis faucibus nunc, eget dictum nulla auctor vel. Nullam sollicitudin porttitor accumsan. Nulla et orci ligula. Mauris imperdiet finibus ligula convallis bibendum. Nullam magna lectus, sodales non velit sit amet, dapibus porttitor sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Curabitur eu ligula eu nisl dapibus vulputate quis id ante. Ut vitae arcu in tortor ultricies pretium eu sit amet urna. Pellentesque malesuada libero nunc, quis elementum quam tristique at. Nulla mollis et dui a gravida. Nulla iaculis finibus sem sit amet ornare. Praesent pellentesque bibendum velit, ut semper odio dictum consequat. Donec feugiat venenatis lacus, at rutrum libero venenatis eget. Donec tempor lorem neque. Vestibulum eu quam vehicula, facilisis elit quis, scelerisque ipsum. Suspendisse aliquet arcu at arcu vestibulum dictum.
Ut ut pharetra sapien, nec posuere dolor. Nunc convallis viverra ipsum in tempor. Donec interdum viverra mauris, vel placerat lectus ultricies non. Etiam interdum vestibulum aliquet. Duis luctus vel elit eget condimentum. Sed molestie pulvinar dictum. Aliquam libero enim, eleifend at vehicula et, porttitor ac turpis. Duis quis urna elit.
Morbi facilisis volutpat turpis eget tempus. Aliquam eu dolor ornare, lacinia nibh ut, interdum ligula. Aliquam finibus egestas dapibus. Sed at semper nulla. Sed eu sodales risus. Sed interdum ante nec mi suscipit, in aliquet erat posuere. Sed velit risus, dapibus nec posuere ac, vulputate sed dui. Sed lobortis enim in ipsum imperdiet rhoncus. Nulla eu urna quam. Nulla dapibus quis dui eu consectetur. Cras feugiat, ex in finibus fringilla, orci erat congue urna, sed consequat quam dolor ac enim. Integer facilisis euismod nunc quis auctor. Nam iaculis ullamcorper magna, sed feugiat neque volutpat vel. Integer varius ultrices erat quis interdum. Proin sit amet sagittis sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
In at ullamcorper ipsum. Nam ultrices, lectus et gravida posuere, est tortor dignissim ante, at sodales ipsum ex tempor nisl. Cras fermentum tempus malesuada. Nam fermentum ante in massa tristique, porttitor fermentum turpis iaculis. Aenean et neque sed lacus auctor facilisis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis non suscipit nulla. Nullam at magna dui. Duis fringilla vitae arcu at mollis. Praesent ultrices efficitur dolor, eget tempus dolor rutrum eu. Ut condimentum sodales lectus ut lacinia. Suspendisse potenti. Sed nec est in dui dictum blandit. Cras eu neque felis. Integer luctus faucibus augue, quis luctus erat scelerisque eu.
</body>

FYI, Scroll slowly because it will render fast or You can console or alert it inside the condition. So you can understand it.
window.onscroll = () =>{
let element = window.pageYOffset;
element = Math.round(element)
console.log(element)
if(element == 30){
document.body.style.backgroundColor = "red"}
else{document.body.style.backgroundColor = "white"}
}
<body>
<div style="height:2000px; width:100px">
</div>
</body>

My onscroll event is not firing my java script function

I'm trying to say in my code that if the user scrolls down 250px, I want the data-percent to go from 0% to 100% and this is done in "myFunction". I am still new to JS so I'm having trouble understanding why it's not working when I scroll past 250px. Any help would be much appreciated!
var div = document.getElementById('div1');
window.onscroll = myFunction();
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
} else {
div.getAttribute('data-percent').value = "";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">100%</div>
</div>
I expect the data-percent attribute to go from 0% to 100% when I scroll past 250px, and then back to 0% when I scroll back up.

I fixed the header to the top of the page so you could see it, and added some filler text to make it scroll, but the issue was that your code only called myFunction as soon as the page loaded - it wasn't doing anything else. You needed to change the call of myFunction into a reference to myFunction by removing the parentheses.
var div = document.getElementById('div1');
window.onscroll = myFunction;
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
div.querySelector(".skill-bar-percent").textContent = "100%";
} else {
div.getAttribute('data-percent').value = "";
div.querySelector(".skill-bar-percent").textContent = "0%";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%" style="position: fixed; top: 0; background-color: white; display: block;">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">0%</div>
</div>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>

You need to change:
window.onscroll = myFunction();
Into
window.onscroll = function() {myFunction()};
Why? because the onscroll is an Event that executes a function after something had happened (Scroll Event in our case).
But when you use use the the code like window.onscroll = myFunction(); the JS engine will immediately invoke the function regardless to the scroll event as soon as he sees this line of code.

You need to do two changes to achive what you are looking :
First as Shahar mentioned, you need to change the way you run the function :
window.onscroll = function() {myFunction()};
And the other thing, you are using getAttribute method to update the value of your attribute, you need to use setAttribute instead :
div.setAttribute('data-percent', '100%');
And maybe add a height to your div with css to actually be able to scroll :
#div1{height:700px}
https://jsfiddle.net/odpzLtec/

How to access element from this.event.path?

I basically want to access all the properties of an element that you get when say, that element is a target to an event. We do this via this.event.target to get access to all its properties.
What I want to do is search for scrollTop key of elements in the path of an event but all I am returned is their names instead of their equivalent JS objects.
Here's my try:
const viewport = this.event.path.filter(element => element.scrollTop) || { scrollTop: 0 };
But this just doesn't work and returns me an empty array.

you're not getting the scrollTop values because filter return the array containing all the elements having the properity scrollTop : do as following :
const viewport = this.event.composedPath().filter(element => element.scrollTop).map(e => { return e = {
//whatever you want to keep
scrollTop: e.scrollTop
}})
Here's a simple example to extract the scrollTop values from it with map
document.querySelector('html').addEventListener('click',function(e) {
let paths = e.composedPath().map(e => { return e.scrollTop || 0 })
console.log(paths)
});
div {
overflow-y: scroll;
height: 20px;
}
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium sed quam sed faucibus. Sed dictum enim non tortor egestas, sagittis mattis sem hendrerit. Duis quis massa turpis. Fusce consectetur facilisis lectus nec elementum. Praesent porttitor massa non enim bibendum, eu interdum lacus vehicula. Vestibulum efficitur felis sit amet ipsum venenatis interdum. Sed vulputate nibh id mi egestas, eu rutrum tellus dignissim. Sed suscipit risus condimentum libero pulvinar venenatis. Maecenas semper, erat eget dictum egestas, nisl urna finibus quam, a fermentum magna ante vel erat. Integer sed neque tristique, bibendum nisl et, pretium augue. Duis malesuada odio vitae commodo venenatis. Nunc consequat libero ac velit tempus sollicitudin. Sed scelerisque velit sem, ac pellentesque tellus rutrum eget. Aliquam convallis, ipsum id consectetur tempor, nibh odio fermentum orci, vitae imperdiet felis arcu vel elit. Sed venenatis et erat eget scelerisque. Aliquam consectetur nibh eu augue dignissim, a vestibulum ligula facilisis.
Quisque tincidunt in nulla ut placerat. Nullam posuere massa et urna eleifend consectetur. Praesent in odio mauris. Quisque pellentesque ante vitae justo consequat, vel posuere sapien lacinia. Aliquam varius diam nec purus scelerisque lobortis. Donec nisi mi, imperdiet posuere orci in, lobortis egestas purus. Aenean luctus egestas eleifend. Donec semper lectus nunc, eget consectetur nulla commodo vel. Aliquam erat volutpat. Quisque sodales enim sed diam pretium, eget finibus felis interdum. Mauris mattis id velit quis tincidunt. Fusce et pellentesque felis. Proin fermentum, est sed malesuada egestas, lorem nisl luctus mi, non tempor mi leo id nunc. In viverra rhoncus pulvinar. Duis dictum sem ac nisi fermentum, non iaculis eros convallis.
Vestibulum pharetra neque vitae auctor fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eu erat sed ante cursus congue quis nec metus. Donec et erat sed quam faucibus pellentesque. Donec eu orci id justo dignissim tempor at sit amet dui. Curabitur varius lobortis pellentesque. Duis et diam sed ligula laoreet maximus in vel ex. Sed consequat eleifend libero a accumsan. Maecenas convallis tellus lobortis tristique vulputate. Morbi luctus a nisl ac accumsan. Integer dignissim orci et rhoncus porta.
Curabitur lacinia ullamcorper turpis in tincidunt. Nulla facilisi. Sed blandit ultricies arcu, vitae luctus nisi suscipit non. Fusce iaculis dapibus risus. Praesent turpis purus, sodales eget condimentum nec, vehicula id erat. Cras placerat velit justo, non imperdiet quam efficitur in. Fusce sit amet nisl sed purus vestibulum interdum. In felis mi, finibus non sagittis ut, accumsan a velit.
Nunc et ullamcorper mi. Donec vulputate tortor ante, in consequat enim facilisis condimentum. Nullam fermentum, libero ac iaculis tincidunt, dui nibh varius enim, in sollicitudin elit arcu eget libero. Quisque tincidunt mauris ex, sed congue augue faucibus at. Phasellus accumsan urna id enim ullamcorper suscipit. Pellentesque id quam a enim hendrerit dictum. Etiam sit amet dapibus justo, at sollicitudin urna. Etiam sodales efficitur urna, tempor ullamcorper tellus blandit sit amet. Ut magna magna, euismod et viverra suscipit, tristique posuere enim. Phasellus augue ex, viverra a pretium vel, porttitor a turpis. In placerat lectus eu suscipit sodales. Nam at placerat odio. Vivamus ullamcorper fringilla quam in iaculis. Maecenas id viverra nibh. Nunc lorem nunc, auctor non augue a, aliquam dictum lorem. Phasellus pretium nibh in nunc fermentum scelerisque et vel turpis.
</span>
</div>
scroll the text and click on it

Custom Circle Cursor With jQuery And CSS3

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>

loading data by scrolling using javascript

I am displaying data on my page and when i click on load more data button it will load more data on the same page below the data that was already displayed. I want to convert this feature so that more data will be loaded as the user scrolls down the page rather than clicking on load more data. Here is what i have and what i have attempted.
html view
<section id="rosterImages">
<section id="users">
<div id="nameImage">
<figure id="content" class="thumbnail">
<img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a>
</figcaption>
</figure>
</div>
</section>
</section>
Javascript Scroll
$(window).scroll(function (e) {
if ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.7) {
$('#users').append(Next());
}
});
Next method
Next = function () {
var _page = $.views.Roster.ViewModel.CurrentPage() + 1;
$.views.Roster.ViewModel.CurrentPage(_page);
$.views.Roster.GetPage("/api/Roster", 9, _page);
};
the next method works if i link it up to a button but not with a scroll.

We just implemented something similar and our method was almost like the other answer except for the check to see if you had actually reached the end of the page
<script>
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
//-10 makes it such that you don't have to scroll all the way to the bottom
//can be adjusted as needed for footers, etc,
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
alert('Scrolling should be called now');
$('#users').append(Next());
}
});
</script>

Is it fine if you try loading data when User Scroll's to END of the PAGE,
Then you can possibly try :-
<script>
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert('Just checking if End of the Scroll Works');
$('#users').append(Next());
}
});
</script>
[Updated]
I tried the same with $(document).ready(function () {));, and it works like charm:-
$(document).ready(function () {
// Handler for .ready() called.
$(window).scroll(function () {
alert("Scrollbar Initiated");
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("Scrollbar appended");
$('#users').append(Next());
}
});
});
The complete code which I tried was something like below:-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function () {
// Handler for .ready() called.
$(window).scroll(function () {
//Will check if the user has reached bottom of a PAGE
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
alert("Scrollbar appended");
$('#users').append(Next());
}
});
Next = function () {
var text = "..............Appended to Lipsum......................";
return text;
};
});
</script>
<body>
<div id="users">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed tellus mauris, non tincidunt libero. Nullam eros tellus, posuere sit amet tempus laoreet, mattis fringilla nisl. Maecenas commodo arcu ac mauris sagittis nec iaculis justo vulputate. Nulla eros justo, consectetur fringilla iaculis gravida, eleifend quis metus. Suspendisse ut ante justo. Proin mollis pellentesque elit, in eleifend erat rhoncus vel. Aenean magna odio, pharetra in rhoncus et, venenatis sed nunc. Mauris convallis, nunc et gravida sagittis, leo urna porttitor lacus, vel pellentesque felis arcu eu metus. Suspendisse eget neque id risus pharetra sollicitudin.
</p>
<p>
Fusce fermentum sollicitudin neque eu vestibulum. Donec adipiscing fermentum varius. Ut ut libero lacus, ut viverra dolor. Praesent bibendum elementum dui at consequat. Pellentesque pulvinar, lacus eu auctor aliquet, mi eros egestas orci, sit amet condimentum erat tortor nec felis. Aliquam erat volutpat. Donec fermentum molestie tempor. Donec non facilisis metus. Nam convallis tempor ipsum in scelerisque. Mauris cursus metus sed justo pretium fringilla. Nulla cursus scelerisque tellus vel ornare. Etiam sit amet sapien diam, ut commodo mi. Vestibulum nec enim id metus feugiat aliquet. Integer varius faucibus odio vel eleifend. Nunc convallis lectus at quam consequat ac accumsan nunc sodales.
</p>
<p>
Nunc elementum augue quis velit hendrerit vel aliquam dui porta. Pellentesque sollicitudin tincidunt elit ac cursus. Sed iaculis, magna facilisis tincidunt ultricies, risus augue semper est, sit amet cursus lectus arcu iaculis elit. Nullam in massa felis, sit amet tempus urna. Vestibulum condimentum urna quis tortor volutpat sodales. Nullam sed nisl est, eget pulvinar elit. Pellentesque sagittis congue urna, nec molestie quam lacinia nec. Ut rhoncus fringilla tellus, eget molestie nibh mattis quis. Nunc nec purus elit. Cras vitae felis ac arcu iaculis egestas. Pellentesque aliquet, urna et ultrices porta, metus arcu consequat neque, quis vehicula quam magna sed risus. Nulla a nunc neque, sed fermentum risus. Vestibulum pellentesque elementum suscipit. Nulla dolor massa, lacinia vel vulputate ac, eleifend eu odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc lacinia justo in ante ornare consequat.
</p>
<p>
Sed dapibus quam ut augue luctus rhoncus. Aliquam cursus semper velit ac feugiat. Nullam erat magna, adipiscing id pharetra vel, elementum ut odio. Phasellus facilisis, justo id adipiscing posuere, lectus tellus vehicula nunc, nec vulputate elit ligula vitae nisi. Nunc tristique velit et turpis viverra vel condimentum nibh varius. Vivamus magna ante, adipiscing et iaculis sed, rutrum sit amet diam. Nunc semper orci non risus rutrum eget ullamcorper nulla volutpat. Suspendisse auctor quam vitae nisl blandit vulputate. Praesent justo mi, condimentum non malesuada sit amet, molestie ac massa. Phasellus dictum tincidunt massa, sed dictum urna rutrum id. Praesent eu gravida risus.
</p>
<p>
Nullam et neque tortor, ut accumsan nisl. Nullam pulvinar fermentum velit, eu tristique arcu sollicitudin eget. Praesent rhoncus malesuada mauris at fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ac massa lacus, et eleifend turpis. Proin fringilla imperdiet eros at venenatis. Fusce eu tempor lorem. Morbi ipsum tortor, condimentum quis pretium posuere, scelerisque sed purus. Maecenas in augue nunc, et ultrices risus. Fusce convallis tempus varius. Pellentesque eget nulla magna, ac ornare nibh. Morbi euismod dolor et nisl molestie in ornare eros gravida. Praesent sit amet lorem hendrerit diam ultrices egestas nec quis felis. Suspendisse nec nisl erat, ut ornare risus. Nulla nec pretium sapien.
</p>
<p>
Proin urna tellus, commodo in rhoncus non, elementum aliquam nisl. In consequat pretium dolor vel sollicitudin. Aliquam quis mauris eu elit hendrerit ultrices a et justo. Phasellus nec sodales felis. Pellentesque venenatis mauris in magna fringilla vitae fringilla erat tempor. Proin posuere augue eu odio volutpat ultrices. Donec pulvinar interdum eros in auctor. Sed molestie, lacus id posuere elementum, erat odio eleifend ligula, vel euismod nibh libero sit amet dolor. Phasellus ac augue urna. Pellentesque feugiat suscipit semper. Pellentesque luctus tempus tincidunt. Ut scelerisque, eros et porta euismod, neque elit ornare quam, quis posuere sem nulla et velit. Nam purus neque, accumsan nec lacinia ut, varius vel arcu. Nullam at orci sem, et aliquet augue. Nam imperdiet suscipit feugiat. Suspendisse dictum mi eget magna commodo at tristique odio dictum.
</p>
<p>
Ut a magna nec nulla ultrices faucibus. Praesent et est est. Aliquam vulputate lobortis tincidunt. Phasellus rhoncus imperdiet aliquet. Nullam id mi neque, sit amet tristique urna. Integer adipiscing, ipsum vel vestibulum vulputate, nulla ipsum blandit orci, et elementum quam lorem vitae mauris. Quisque consectetur ornare euismod. Nam vel iaculis risus. Proin lobortis dignissim lacus, sed feugiat lacus ultrices quis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</p>
<p>
Nullam bibendum posuere adipiscing. Suspendisse potenti. Praesent nisi sem, scelerisque et semper vitae, pulvinar eget nunc. Mauris ultrices ultricies sem, pulvinar convallis augue aliquet eu. Curabitur sed purus eu turpis congue egestas. Sed tempus orci quis elit hendrerit pretium. Nam dictum nibh non orci vestibulum elementum. Phasellus sit amet velit volutpat erat elementum venenatis. Quisque facilisis egestas libero, a gravida nibh rhoncus quis. Quisque risus diam, viverra eu lacinia eu, ultrices non eros. Curabitur placerat imperdiet neque, ut cursus purus posuere eu. Proin sed ipsum leo, vitae rutrum diam. Suspendisse placerat risus nec nisl adipiscing vitae sagittis ipsum hendrerit. Phasellus sollicitudin orci mauris, sit amet sollicitudin lectus. Vivamus et bibendum justo.
</p>
<p>
Duis sed metus ac mi fermentum congue in vel nisl. Integer nunc magna, pulvinar a venenatis a, accumsan varius libero. Integer facilisis urna non enim viverra a porttitor ante lobortis. Pellentesque pharetra gravida porttitor. Morbi iaculis nibh sed urna malesuada ac facilisis mi vestibulum. Praesent euismod aliquam laoreet. Praesent at dolor eget augue convallis viverra vel ut ante. Praesent dictum est et nisi dictum ut vestibulum erat ullamcorper. Donec aliquam, quam in euismod pulvinar, augue mauris gravida lorem, a porta nunc felis at felis. Nam eget libero urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean iaculis massa sed purus tempor eu laoreet odio venenatis. Integer ultrices felis id ante pharetra bibendum. Sed at lorem vitae nunc vestibulum egestas. Fusce vel malesuada neque.
</p>
<p>
Sed non pretium sem. Aliquam id elit malesuada mi commodo dignissim ac sit amet diam. Integer fringilla arcu id est tincidunt non vestibulum eros commodo. Sed dictum sapien in nisi dapibus id pretium ipsum rutrum. Nulla justo diam, auctor sit amet venenatis sed, volutpat non ante. Aenean eu tristique augue. Suspendisse nisl nibh, eleifend et adipiscing in, volutpat sed enim. Nunc eros urna, gravida vitae interdum eget, volutpat et ipsum. Suspendisse eget turpis varius magna pretium fermentum. Nam neque turpis, tristique ac semper eu, pellentesque sit amet dolor. Integer aliquam aliquam tortor, sit amet dignissim quam laoreet at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet mi augue. Maecenas pretium accumsan sollicitudin.
</p>
<p>
In at neque quam, sed sollicitudin eros. Praesent venenatis, neque quis molestie dapibus, nisl nibh tincidunt elit, sodales fermentum quam purus sed dolor. Nullam bibendum, nisl a scelerisque accumsan, dui nibh dapibus mi, ut pellentesque arcu massa aliquam lectus. Cras fermentum, libero eget pulvinar elementum, nibh orci fermentum justo, a bibendum lectus nisl sit amet felis. Mauris at lorem quis est auctor tristique. Quisque dui libero, congue vel fermentum vel, congue quis libero. Aenean cursus dolor at augue sodales rutrum. Aenean egestas vulputate nulla, at porta tortor venenatis id. Vivamus sit amet lectus vitae lorem pellentesque mollis sed a diam. Donec consectetur mi non sapien sagittis faucibus. Proin at lacus purus, in lobortis lorem. Praesent ac arcu justo, at elementum erat. Quisque vulputate accumsan turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tempor erat vel tellus pellentesque tincidunt. Duis dolor mi, placerat id molestie laoreet, semper ut nibh.
</p>
<p>
Suspendisse potenti. Sed eu risus dolor, vel semper libero. Sed accumsan est eget urna vulputate pretium. Integer varius venenatis quam. Praesent lacus diam, condimentum quis luctus in, convallis vitae est. Suspendisse potenti. Phasellus interdum mauris ut nisi feugiat sodales. Vivamus condimentum, leo sed placerat rhoncus, eros lacus ultricies sem, sit amet tempor libero nisl et lacus. In sed odio arcu. Proin id diam a lacus tristique posuere. Integer luctus urna et nulla ultrices interdum.
</p>
<p>
Vestibulum a eros quam, et laoreet nisi. Duis convallis tincidunt augue nec pulvinar. Nunc malesuada urna ut sem placerat consequat. Nulla sollicitudin venenatis quam sollicitudin gravida. Curabitur elementum quam sit amet dolor euismod non dapibus elit tincidunt. In turpis augue, luctus et iaculis a, molestie at risus. Praesent sit amet ante ac ipsum fringilla dignissim. Aliquam elit orci, feugiat faucibus laoreet eu, sodales interdum velit. Aliquam dolor mi, pharetra vel suscipit id, tempor eu arcu. Aliquam sem turpis, rutrum quis porta sed, faucibus quis eros. Proin quis varius velit.
</p>
</div>
</body>
</html>

Categories

Resources