javascript - 当 div 在页面顶部时，jQuery 不会悬停动画

Question

我想要完成的事情:如果您将鼠标悬停在显示“嘿，我想要一个背景过渡”的 div 上，但是当该 div 过渡时(当它到达红色部分时)，我不希望在 div 上产生悬停效果。

如果您将鼠标悬停在我的 ".ok"div(表示嘿的那个)上，它有背景和颜色过渡。

但是，当它到达红色部分时，我不希望悬停部分发生在“.ok”div 上。

需要注意的问题:我做了一个if else语句，但它似乎不起作用。
所以我把它放在我的 $(window).scroll 函数中，但它只有在你真正滚动时才有效。在页面加载时，它不起作用。

fiddle :https://jsfiddle.net/jzhang172/j2yrumyg/3/

$(function(){

var cheese= $('.ok').offset().top; //Define top of 'hey'

//
//Animates when it reaches red part of page
//
$(window).scroll(function() {
    if ( $(window).scrollTop() >= cheese  ) {
  
        $('.ok').addClass('top');

    }
    else{
           $('.ok').removeClass('top');
        
    }
});

//
//This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
//
    if ( $(window).scrollTop() >= cheese  ) {
  

    }
else if ( $(window).scrollTop() <= cheese  ){
      $('.ok').hover(function(){
              $(this).addClass('proj-hover');
              },function(){
                $(this).removeClass('proj-hover');
              });
}

//
//Animate on click
//
$('.ok').click(function(){
    if ( $(window).scrollTop() >= cheese  ) {

}
else{
    $("body, html").animate({ 
            scrollTop: $('.other').offset().top 
        }, 600);
     
}
});








});

*{
  box-sizing:border-box;
}
body,html{
  padding:0;
  margin:0;
}
.div{
  height:100vh;
  width:100%;
  background:#6464FF;
}
.other{
  height:1000px;
  width:100%;
  background:#FF6161;
}
.ok{
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-100px;
  width:200px;
  height:50px;
  line-height:50px;
  background:black;
  color:white;
  text-align:center;
  transition:1s;
}

.top{
  position:fixed;
  top:0;
  left:0;
  transition:.7s;
      margin-left: 0px;
      width:100%;
}
.proj-hover{
  background:white;
  color:black;
}
.blue{
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
  
  <div class="ok">Hey</div>
</div>
<div class="other"></div>

Answer 1

您需要检查它是否有 top 类。如果是，则删除 proj-hover 类。

Fiddle

您的代码将如下所示:

$(function(){

    var cheese= $('.ok').offset().top; //Define top of 'hey'

    //
    //Animates when it reaches red part of page
    //
    $(window).scroll(function() {
        if ( $(window).scrollTop() >= cheese  ) {
            $('.ok').addClass('top');
        } else{
            $('.ok').removeClass('top');
        }
    });

    //
    //This part doesn't rely on scroll event and is in charge of changing hover on ".ok" div.
    //

    $('.ok').hover(function(){
        if(!$(this).hasClass("top"))        **//here is change**
            $(this).addClass('proj-hover');
    },function(){
        $(this).removeClass('proj-hover');
    });
    //
    //Animate on click
    //
    $('.ok').click(function(){
        if ( $(window).scrollTop() >= cheese  ) {
    }
    else{
        $("body, html").animate({ 
            scrollTop: $('.other').offset().top 
        }, 600); 
    }
    });
});

希望这对您有所帮助!