how to make the content appear on scrolling down the webpage?

Question

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>

refer this link: http://stackoverflow.com/questions/15798360/show-div-on-scrolldown-after-800px — chirag, Jul 30 '16 at 11:29

score 12 · Accepted Answer · edited Sep 18 '18 at 01:24

12

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

edited Sep 18 '18 at 01:24

Karen Wang

3
3

answered Jul 30 '16 at 11:39

id3vz

460
4
15

How to use a library. I mean to put it to work...I have never used a library before – Varun Jain Jul 30 '16 at 11:40
There is a documentation for it here on github https://github.com/michalsnik/aos and to install it just add in the head tag if you want to add a cdn link and before body close tag add this – id3vz Jul 30 '16 at 11:49
Okay great. Ill check. Btw please vote my question so that i dont get blocked – Varun Jain Jul 30 '16 at 11:50
I wish i can :) , but I'm less than 15 reputation now :'D. – id3vz Jul 30 '16 at 12:05
How to add this in wordpress site? – Varun Jain Jul 30 '16 at 12:25
can we have a chat in private. I tried AOS but I think im not getting it properly – Varun Jain Jul 30 '16 at 12:43
sure we can have a private chat if you wish, and if you wants my contacts they are in my portfolio in my stackoverflow profile – id3vz Jul 30 '16 at 14:07
Whatever happened to pure JS solutions without third party libraries. – dryleaf Feb 13 '19 at 06:50

Asen Sokolov · Answer 2 · 2016-07-30T11:46:41.067

2

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

edited Jul 30 '16 at 11:46

answered Jul 30 '16 at 11:44

Asen Sokolov

74
4

Okay thanks ill try. Btw please vote my question up so that i dont get blocked, its a genuine querrry – Varun Jain Jul 30 '16 at 11:46
1

Whatever happened to pure JS solutions without third party libraries. – dryleaf Feb 13 '19 at 06:51

score 1 · Answer 3 · answered Jul 30 '16 at 11:32

$(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>

Whatever happened to pure JS solutions without third party libraries. — dryleaf, Feb 13 '19 at 06:51

score 1 · Answer 4 · answered Jul 30 '16 at 11:37

1

You can use some of the popular JS libraries such as:

http://scrollmagic.io/

https://scrollrevealjs.org/

Good luck :)))

answered Jul 30 '16 at 11:37

Asen Sokolov

74
4

how to use js libraries...I have no idea – Varun Jain Jul 30 '16 at 11:38
Sure give example. A link or something – Varun Jain Jul 30 '16 at 11:43

how to make the content appear on scrolling down the webpage?

4 Answers4