How to make an element hidden, then appear and disappear again with the scroll in Jquery

Question

How to make an element hidden, then appear and disappear again with the scroll in Jquery

Navigation

#1 by (2 votes)

0

I'm doing a website and I want to make an element: 1- This hidden. 2-Appear when the scroll is greater than 900px. 3-Disappear when the scroll is greater than 3000px. I was using Jquery and the code I did is the following:

$(document).ready(function() {
    //show hide button on scroll
    $(window).scroll(function() {
        if($(this).scrollTop() > 900) {
              $('#email2').fadeIn();
        } else {
              $('#email2').fadeOut();
        };
    });
});

But only meet points 1 and 2, help me to achieve the 3 points please? (try with if and also with switch, but do not succeed)

javascript jquery html scroll

asked by oscar caballero 10.07.2018 в 04:44

source

1 answer

Error in showing data when adding a where in a MySQLi query? disable option in drop-down list

score 2 · Answer 1

The condition is wrong, it should be like this:

if ($(this).scrollTop() > 900 && $(this).scrollTop() < 3000)

Modify your code a bit, try it ...

$(document).ready(function() {
  //show hide button on scroll
  $('.box').hide();
  $(window).scroll(function() {
    if ($(this).scrollTop() > 900 && $(this).scrollTop() < 3000) {
      $('.box').fadeIn();
    } else {
      $('.box').fadeOut();
    };
  });
});

.container {
  height: 5000px;
  background-color: red;
}

.box {
  height: 100px;
  width: 200px;
  background-color: blue;
  position: fixed;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='box' id='box'></div>

</div>