Question

我的箭头有这个功能：

<script>
        $(window).scroll(function() {
    var pxFromBottom = 1300;
    if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
        $('#nagore').fadeIn('slow');
    } else {
        $('#nagore').fadeOut('slow')
        }
    }); 
</script>

我想从Bottom top Top更改此var。

所以而不是

pxFromBottom = 1300

成为

pxFromTop = 1300

但问题是当我将其更改为TOP时它无法正常工作。我怎么能这样做？

Answer 1

$(document).height() - pxFromBottom将为您提供页面顶部的相对位置。这与pxFromTop值本身相同，因此替换它应该有效：

$(window).scroll(function() {
    var pxFromTop = 1300;
    if ($(window).scrollTop() + $(window).height() > pxFromTop) {
        $('#nagore').fadeIn('slow');
    } else {
        $('#nagore').fadeOut('slow')
    }
});

Answer 2

我认为这可能会有所帮助。

$(document).scroll(function() {
var pxFromTop = $(this).scrollTop();
 if (pxFromTop > 1300) {
   $('#nagore').fadeIn('slow');
   } else {
     $('#nagore').fadeOut('slow');
   }
});

<强> See the working example

 .container{
  width: 100%;
  height: 2600px;
 }

#nagore{
 display: none;
 background: #222;
 width: 50px; 
 height: 50px;
 position: fixed;
 bottom: 10px;
 right: 10px;
 border-radius: 50px;
}

页面顶部的箭头

2 个答案: