CODEWITHSUNDEEP
jqueryhtmlcss
Crispybagel
Crispybagel

Reputation: 1

Jquery div hide/show on scroll distance

This div should only show after scrolling down 270px, cant get it to work. Theres a bunch of stuff inside the div also but that shouldnt change anything really.

HTML:

<script src="Jquery.js"></script>
<div id="Movingmenu"></div>

CSS:

#Movingmenu {
  position: fixed;
  top: 10%;
  width: 5%;
  height: 10%;
  left: 7.5%;
  z-index: 100;
  background: #989898;
  transition: left 0.3s ease-in-out,
              width 0.3s ease-in-out, 
              height 0.3s ease-in-out;
  display: none;
}

JQuery:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 270px) {
    $('#Movingmenu').fadeIn();
  } else {
    $('#Movingmeny').fadeOut();
  }
});

Upvotes: 0

Views: 357

Answers (3)

Shafiqul Islam
Shafiqul Islam

Reputation: 5690

please change this 

if(y > 270px )

to 

if(y > 270)


 $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 270) {
            $('#Movingmenu').fadeIn();
        }
        else {
            $('#Movingmenu').fadeOut();
        }
    });
 #Movingmenu {
        position: fixed;
        top: 10%;
        width: 5%;
        height: 10%;
        left: 14.5%;
        z-index: 100;
        background: #989898;
        transition: left 0.3s ease-in-out,
        width 0.3s ease-in-out,
        height 0.3s ease-in-out;
        display: none;
    }

    #MovingmenuTest {
        top: 10%;
        width: 12%;
        height: 1000px;
        left: 7.5%;
        z-index: 100;
        background: #989898;
        transition: left 0.3s ease-in-out,
        width 0.3s ease-in-out,
        height 0.3s ease-in-out;
        display: block;
        border: 1px solid #ccc;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Movingmenu">Main Div</div>
<div id="MovingmenuTest">This is test check</div>

Upvotes: 0

Crashtor
Crashtor

Reputation: 1279

You're currently printing 270px as a string which means in order for it to work you need to put it in quotation marks.

  if (y > "270px")

Or just remove px all together

  if (y > 270)

jquery does all the measurement in px anyways unless you tell it otherwise. for instance:

if (y > "10%")

Upvotes: 2

Chandra Kumar
Chandra Kumar

Reputation: 4205

Try this:

Demo: https://output.jsbin.com/wumuzasudi

#Movingmenu {
  position: fixed;
  top: 10%;
  width: 5%;
  height: 10%;
  left: 7.5%;
  z-index: 100;
  background: #989898;
  transition: left 0.3s ease-in-out,
  width 0.3s ease-in-out, 
  height 0.3s ease-in-out;
  display: none;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script> 
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if(y > 270) {
    $('#Movingmenu').fadeIn();
  } else {
    $('#Movingmenu').fadeOut();
  }
});
</script>
</head>
<body>
<div id="Movingmenu">Hello World</div>
<p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
  <p>test</p>
</body>
</html>

Upvotes: 0

Related Questions