I get the following warning in firefox
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
The snippet I use is
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
$('#share-bar').hide('slow');
}
else {
$('#share-bar').show('slow');
}
});
How can I solve this, Thx for helping
with me VERY EASY ! i solve it in my case too!
i have the same problem here to js/jquery onscroll then show the "back to top" button.
i solve this problem with a "switch boolean" and a timer:
(i had alternatives solutions but it's seems this one to be the best)
..with a ftm license (FREE TO MANKIND license: show this script to anyone still programming)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="Constantin">
<title>on scroll 2019</title>
</head>
<body>
<!-- the complete asyncron solution to manage "This site appears to use a scroll-linked positioning effect",the console error you see from the browsers -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
var sw=true;
$(window).scroll(function () {
if(sw){
sw=false;
setTimeout(function(){
if ($(this).scrollTop() != 0) {
$('#gotop').show();
sw=true;
} else {
$('#gotop').hide();
sw=true;
}
}, 200);
}
});
$('#gotop').click(function(){
//$("html, body").animate({ scrollTop: 0 }, 100);
window.scrollTo(0,0);
return false;
});
});//on ready
</script>
<style type="text/css">
#gotop {
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
display: none;
}
</style>
<div id="gotop">GO TO TOP</div>
bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>bla bla bla<br>not a lorem ipsum<br>only bla bla bla<br>
</body>
</html>
