Question

有没有办法让offset.top（）响应？如果没有，当触摸浏览器的顶部时，如何使滚动的动画div响应？

在我的小提琴中，当您向下滚动时，div正确地向上移动，但如果您在高度方向上碾压屏幕，则它不再按预期运行。
根据我的理解，这是因为存储div的变量被调用一次，但是当我将它绑定到scroll事件时，div并没有按预期工作。

小提琴：https://jsfiddle.net/jzhang172/j2yrumyg/8/

＆＃13;

$(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');

        $('.nice').hide().fadeIn().html('ok');
            $(".nice").animate({ 
            left:"0"
        }, 600);
        $('.nice').addClass('maybe');

    }
    else{
                $('.ok').removeClass('top');
                $('.nice').removeClass('maybe');
                $('.nice').html('Hey');


    }
});

//
//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"))
           $(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);
     
}
});








});

＆＃13;

*{
  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;
}
.nice{
  transition:0s;
    margin: 0px;
}

＆＃13;

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

＆＃13;

Answer 1

您的代码只是从开头的元素 .ok 获取.top()。为了使它起作用，您还应该使用不会改变它的位置的东西，作为 .other 元素。

在此处更新了您的代码：

$(window).scroll(function() {
    var cheese= $('.other').offset().top; //Define top of 'hey'
    if ( $(window).scrollTop() >= cheese  ) {
        ...
    }
});

<强>更新
但是如果你想根据元素 .ok 获得位置，你需要为它创建一个占位符元素。

<强> HTML

<div class="div">
  <div class="placeholder">
    <div class="ok">
      <p class="nice">Hey</p>
    </div>
  </div>
</div>
<div class="other"></div>

<强> CSS

.ok,
.placeholder{
  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;
}

<强> JS

$(window).scroll(function() {
    var cheese= $('.placeholder').offset().top; //Define top of 'hey'
    if ( $(window).scrollTop() >= cheese  ) {
        ...
    }
});

Fiddle with result

jQuery和Javascript：offset.top（）没有响应

1 个答案: