用户向下滚动到底部时发出警报

Question

我想要完成的是当用户滚动到div的底部，发出警报时，看起来它只是警告它何时位于页面顶部。不确定是什么错误：

小提琴：https://jsfiddle.net/jzhang172/d8jot3sj/1/

＆＃13;

＆＃13;

$(function(){
var content = $(".content");

 var box = $(".box");
 $(box).scroll(function(event) {  

 var box = $(".box");
if($(box).scrollTop() + $(box).height() == $(box).height()) {
alert('bottom');

}
});
$(".box").scroll(function(event){
var positionofscroll = $(this).scrollTop();

if(positionofscroll > 0){
content.stop().animate({
backgroundColor:"rgba(105, 63, 63, 0.69)"
},500);
}else {
content.stop().animate({
  backgroundColor:"red"
},500);

}
}); //scroll


});

＆＃13;

.box{
  width:100%;
  height:500px;
  background:gray;
  overflow:auto;
}

.content{
  color:white;
  display:flex;
  justify-content:center;
  align-items:center;
  height:1000px;
  background:red;
  font-size:30px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!--Change background when user scrolls -->

<div class="box">
  <div class="content">
    I'm content
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用此代码

if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight)  {
        alert('Reached at bottom');
}

在 $（框）.scroll（function（event）{}）;

内

运行此代码段

$(function() {
  var content = $(".content");

  var box = $(".box");
  
  $(".box").scroll(function(event) {
    
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      alert('Reached at bottom');
    }
    
    var positionofscroll = $(this).scrollTop();

    if (positionofscroll > 0) {
      content.stop().animate({
        backgroundColor: "rgba(105, 63, 63, 0.69)"
      }, 500);
    } else {
      content.stop().animate({
        backgroundColor: "red"
      }, 500);

    }
  }); //scroll


});

.box {
  width: 100%;
  height: 500px;
  background: gray;
  overflow: auto;
}
.content {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1000px;
  background: red;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!--Change background when user scrolls -->

<div class="box">
  <div class="content">
    I'm content
  </div>

</div>