I have seen website where content appear as I scroll down the webpage. I have this code but its not working. Can you guide and give proper explanation.

$(document).ready(function(){
  //Take your div into one js variable
  var div = $("#divToShowHide");
  //Take the current position (vertical position from top) of your div in the variable
  var pos = div.position();
  //Now when scroll event trigger do following
  $(window).scroll(function () {
   var windowpos = $(window).scrollTop();
   //Now if you scroll more than 100 pixels vertically change the class to AfterScroll
   // I am taking 100px scroll, you can take whatever you need
   if (windowpos >= (pos.top-100)) {
     div.addClass("AfterScroll");
   }
   //If scroll is less than 100px, remove the class AfterScroll so that your content will be hidden again 
   else {
     div.removeClass("AfterScroll");
   }
   //Note: If you want the content should be shown always once you scroll and do not want to hide it again when go to top agian, no need to write the else part
 });
});

.BeforeScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  display: none;
}


/*Use this class when you want your content to be shown after some scroll*/
.AfterScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  display: block;
}

<script src=".1.1/jquery.min.js"></script>
<div id = "divToShowHide" class = "BeforeScroll">Content you want to show hide on scroll
 </div>

I have seen website where content appear as I scroll down the webpage. I have this code but its not working. Can you guide and give proper explanation.

$(document).ready(function(){
  //Take your div into one js variable
  var div = $("#divToShowHide");
  //Take the current position (vertical position from top) of your div in the variable
  var pos = div.position();
  //Now when scroll event trigger do following
  $(window).scroll(function () {
   var windowpos = $(window).scrollTop();
   //Now if you scroll more than 100 pixels vertically change the class to AfterScroll
   // I am taking 100px scroll, you can take whatever you need
   if (windowpos >= (pos.top-100)) {
     div.addClass("AfterScroll");
   }
   //If scroll is less than 100px, remove the class AfterScroll so that your content will be hidden again 
   else {
     div.removeClass("AfterScroll");
   }
   //Note: If you want the content should be shown always once you scroll and do not want to hide it again when go to top agian, no need to write the else part
 });
});

.BeforeScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  display: none;
}


/*Use this class when you want your content to be shown after some scroll*/
.AfterScroll
{
  height: 100px; /*Whatever you want*/
  width: 100%; /*Whatever you want*/
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "divToShowHide" class = "BeforeScroll">Content you want to show hide on scroll
 </div>

• javascript
• jquery
• html
• css

• refer this link: stackoverflow.com/questions/15798360/… – chirag Commented Jul 30, 2016 at 11:29
• your link is enlightening... thanks – Varun Jain Commented Jul 30, 2016 at 11:38

3 Answers 3

If you would like to make some animation also, I'll suggest you AOS

It's an Animate On Scroll Library and you can make the content appear on scrolling down

How to use:

adding "data-aos="animation name"" to HTML tags would do the trick:

<div class="topBar" data-aos="fade-in">

after you add in :

<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">

in head section and add:

<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>

before the end of body tag.

a quick example: https://codepen.io/karenmio/pen/KxGewG

there are variations that you can learn from this but the related site does try to sell you courses, let me know if this link is not proper/or take it out: https://codepen.io/SitePoint/pen/MmxQMG

I will give a an a example with scrollrevealjs

include the library like that:

<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js"></script>

then in your js file just init the library

window.sr = ScrollReveal();

and then just add the class of the component you like to animate

sr.reveal('.YourClass1');
sr.reveal('.YourClass2');

here you will find how to work with this library :)

https://github.com/jlmakes/scrollreveal.js

$(document).ready(function() {

  var div = $("#divToShowHide");

  var pos = div.position();

  $(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    console.log(pos.top)
    if (windowpos > pos.top && pos.top+500 > windowpos) {
      div.addClass("AfterScroll");
       div.removeClass("BeforeScroll");
     
    } else {
       div.addClass("BeforeScroll");
      div.removeClass("AfterScroll");
     
    }
  });
});

body {
  height: 1200px;
}
#divToShowHide{
  top:100px;
position:fixed;
}
.BeforeScroll {
  height: 100px;
  width: 100%;
  display: none;
}
.AfterScroll {
  height: 100px;
  width: 100%;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divToShowHide" class="BeforeScroll">Content you want to show hide on scroll
</div>