此网站似乎使用滚动链接定位效果与$(窗口).scroll(function()和

时间:2018-05-21 07:30:46

标签: jquery scroll height

我在firefox中收到以下警告

此网站似乎使用滚动链接定位效果。这可能不适用于异步平移;有关详细信息,请参阅https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects,并加入有关相关工具和功能的讨论!

我使用的代码段是

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    $('#share-bar').hide('slow');
  }
  else {
    $('#share-bar').show('slow');
  }
});

我如何解决这个问题,帮助

解决问题

1 个答案:

答案 0 :(得分:1)

和我非常容易!我也可以解决这个问题!

我在js / jquery onscroll上遇到了同样的问题,然后显示“返回页首”按钮。 我用一个“开关布尔”和一个计时器解决了这个问题: (我有替代解决方案,但看来这是最好的) ..具有 ftm 许可证(FREE TO MANKIND许可证:向仍在编程的任何人显示此脚本)

<!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>