时间戳

首页 > 解决方案 > 在 div 顶部添加和删除类？

javascript - 在 div 顶部添加和删除类？

问题描述

当“注册”类 div top 进入窗口时，我试图让一个类淡入，否则让类淡出

我怎样才能使这项工作？

$(window).scroll(function() {
  var tint = $('.register').offset().top;

  if ($(this).scrollTop() > tint) {
    $('.tint').fadeIn(1000);
  } else {
    $('.tint').fadeOut(1000);
  }
});
section {
    height: 100vh;
    width: 100%;
}

.tint {
  background-color: #000;
  width: 100%;
  height: 100vh;
  opacity: 0.6;
  position: absolute;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section></section>

<section class="register">
  <div class="tint"></div>

  <div>Content</div>

</section>

标签： javascript

解决方案

您发布的类示例代码似乎可以正常工作，如果有任何问题，我认为您也应该检查 css。但是，如果想要任何其他方法，那么这里有一些方法：您可以使用 fadIn() - fadeOut()，或 hide() - show() 或 css 可见性或显示块和 none，或者只是 jquery UI 动画功能。这是隐藏div jquery animate的动画示例

$(window).scroll(function() {
var top_of_element = $("#element").offset().top;
var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();

if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
    // the element is visible, do something
} else {
    // the element is not visible, do something else
}
});


$(window).scroll(function() {
  var tint = $('.register').offset().top;

  if ($(this).scrollTop() > tint) {
    $('.register').fadeIn();
   // OR
   //$(".register").show();
   // OR
   //$(".register").css('visibility', 'visible');
     } else {
    $('.register').fadeOut();
   // OR
   //$(".register").hide();
   // OR
   //$(".register").css('visibility', 'hidden');
  }
});
.tint {
  background-color: #000;
  width: 100%;
  height: 100vh;
  opacity: 0.6;
  position: absolute;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="register">
  <div class="tint"></div>

  <div>Content</div>

</section>

推荐阅读