CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DJDJ23
DJDJ23

Reputation: 149

JQuery Hide/Show on Scroll down

I'm new to jquery. I'm trying to write a script that will hide the div "box" and all children. When the user scrolls to the bottom of the page, the div "box" and all children display. For time's sake, we'll say the children are "chamber1", "chamber2" and "chamber 3".

when I hide "box", it only removes that div.

$(document).ready(function() {
   $("#box").hide();
});

Apologies for lack of code, but I'm having trouble understanding this lesson and I can't find an exact example of what I'm trying to do through my internet searches.

Thank you!

Upvotes: 0

Views: 2729

Answers (3)

divy3993
divy3993

Reputation: 5810

I think this might help you and would be better to understand. A good explantion is given below here with demo.

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).outerHeight() == $(document).outerHeight()) {
    //Script for activity on reaching bottom of document
    $("#box").fadeOut();
  } else // optional
  {
    $("#box").fadeIn();
  }
});
body {
  margin: 0px;
  width: 100%;
}
.container {
  position: relative;
  height: 900px;
  width: 100%;
  background: #fee;
}
#box {
  position: fixed;
  top: 50px;
  left: 0px;
  background: lightblue;
  height: auto;
  padding: 15px;
  overflow: hidden;
  max-width: 250px;
  width: 210px;
}
#box > div {
  margin: 5px;
  background: #F33636;
  padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
</div>

<div id="box">
  Box
  <hr>
  <div class="chamber1">
    Chamber 1
  </div>
  <div class="chamber2">
    Chamber 2
  </div>
</div>

JSFiddle

You can play around with Fiddle Link.

Upvotes: 0

Swaprks
Swaprks

Reputation: 1553

If you to hide the box when you reach the bottom of the page, you javascript should be as follows:

JAVASCRIPT:

$(document).ready(function() {
   $(document).on("scroll", function(){
     if ( window.scrollMaxY == window.scrollY ) {
        $("#box").hide();
     }
   })
});

HTML: 

<div id="box">
  <div>Chamber 1</div>
  <div>Chamber 2</div>
  <div>Chamber 3</div>
</div>

Upvotes: 3

almostcolin
almostcolin

Reputation: 59

You should make sure that the div has id "box". If you're working with a div of class "box" then you would use:

$(document).ready(function() {
  $(".box").hide();
});

Upvotes: 1

Related Questions