Adding and removing class at div top?

Question

I am trying to make a class fade in when 'register' class div top enters the window and otherwise have the class fade out

How can I make this work?

$(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>

check this . https://stackoverflow.com/questions/20791374/jquery-check-if-element-is-visible-in-viewport — mohitesachin217, Sep 27 '19 at 05:19
try to check css also because position absolute and top:0 can put div to top — mohitesachin217, Sep 27 '19 at 05:23

mohitesachin217 · Answer 1 · 2019-09-27T05:38:06.270

Class example code you posted seems to work correctly, I think you should check css also if there is any problem. But if want any other methods then here are some methods: you can use fadIn() - fadeOut(), or hide() - show() or css visibility or display block and none , or simply can jquery UI animate functionality. Here is animation example to hide 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>

Hey, thanks for your response! I updated my code to so it should make more sense. This is working but it's doing the opposite of what I want it to! I want the tint div to fade in when top of register div reaches bottom of window — Burger Sasha, Sep 27 '19 at 04:40

score 0 · Answer 2 · answered Sep 27 '19 at 04:43

The only problem, that you've passed a string to fadeOut, which expects a number.

So, remove the quotes around '1000', and you'll be right:

$(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>

Adding and removing class at div top?

2 Answers2