Question

大家早上好！

今天我遇到了这段代码的问题......我想要的是元素＆＃34; .cubo＆＃34;当＆＃34;＃team＆＃34;部分位于视口中。

我尝试使用此代码：

var team = $('#team').offset().top;

$(window).on( 'scroll', function(){
        if ($(window).scrollTop() >= team) {
            $('.cubo').css({top:"10%", left: "30%"});
        } else {
            $('.cubo').css({top: "0", left:"0"});
        }
    });

如果我在＆＃34;＃team＆＃34;已经在视口中...但如果我滚动＃34;＃home＆＃34;它不起作用......为什么！??！

拜托，你能告诉我吗？

谢谢

Answer 1

只有在页面加载时才会获得#team的偏移量，然后当页面滚动时你正在做其他所有事情。

尝试将偏移变量移动到您的函数中，以便重新计算滚动时的偏移量。

$(window).on( 'scroll', function(){
    var team = $('#team').offset().top;
    if ($(window).scrollTop() >= team) {
        $('.cubo').css({top:"10%", left: "30%"});
    } else {
        $('.cubo').css({top: "0", left:"0"});
    }
});

Answer 2

早上好！

我认为您的javascript有效，请参阅以下代码段。你能发一个嘲笑HTML和CSS的片段吗？我认为这与此有关！

＆＃13;

var team = $('#team').offset().top;

$(window).on( 'scroll', function(){
        if ($(window).scrollTop() >= team) {
            $('.cubo').css({top:"10%", left: "30%"});
        } else {
            $('.cubo').css({top: "0", left:"0"});
        }
    });

＆＃13;

#container {
  height: 1000px;
}
.cubo {
  position: fixed;
}
#team {
  position: absolute;
  top:300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
 <div class="cubo">
    CUBO
  </div>
  <div id="team">
    TEAM
  </div>
</div>

＆＃13;

当div到达页面顶部时，Jquery Css会发生变化

2 个答案: