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!

Answers 1

  • 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.


Related Articles