How to make text scrollable in html

Question

Hello, I want a specific text to appear when I scroll it or when I scroll it to the point where the text is. The effect should appear somewhat similar to the first effect at the top of the http://namanyayg.com/ website.

I need an effect in minimal code with pure CSS and JS ie without jQuery.

I thought that perhaps I would use something like the display:none property for the range, and then when you scroll through it, display will become block , but I don't know how to trigger the effect using javascript. Any help would be greatly appreciated.

Answer 1

First, wrap any text or content that you want to show in the scroll in a single div so that you can show the hiding of the div depending on the scroll. Write two classes for your target div.

Your CSS:

 /*Use this class when you want your content to be hidden*/ .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; } 

Your HTML:

 <!--Set class BeforeScoll to your target div--> <div id = "divToShowHide" class = "BeforeScroll">Content you want to show hide on scroll</div> 

Your Script:

 <!--include these script in head section or wherever you want--> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js" type="text/javascript"></script> <script type = "text/javascript"> $(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 { s.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 }); }); </script> 

Hope this solves your problem.

Answer 2

I would recommend this plugin.

http://johnpolacek.imtqy.com/superscrollorama/

Edit:

I don’t know, as no one noticed that the decision had to be made without using external libraries such as jQuery. However, the solution is very simple with basic features. Find here

HTML:

 <div id="parent-div"> <div id="child-div"> Psst .. I am here!! </div> </div> 

CSS

 #parent-div { position:relative; height:3000px; width:300px; background-color:red; } #child-div { color:white; position:relative; top:1000px; width:300px; display:none; text-align:center; } 

JS:

 var body=document.getElementsByTagName("body")[0]; var parent=document.getElementById("parent-div"); var child=document.getElementById("child-div"); body.onscroll = function(){ //console.log(documenhttps://fiddle.jshell.net/3urv0tp0/#tidyt.getElementById("child-div").style.top) if(document.documentElement.scrollTop>=child.offsetTop)//Adjust Tolerance as you want { child.style.display="block" } }; 

Answer 3

I like it:

 var doc = document, dE = doc.documentElement, bod = doc.body; function E(e){ return doc.getElementById(e); } function xy(e, d){ if(!d)d = 'Top'; d = 'offset'+d; var r = e[d]; while(e.offsetParent){ e = e.offsetParent; r += e[d]; } return r; } function x(e){ return xy(e, 'Left'); } function y(e){ return xy(e); } var txt = E('theId'), txtS = txt.style; onscroll = function(){ var left = dE.scrollLeft || bod.scrollLeft || 0; var top = dE.scrollTop || bod.scrollTop || 0; var w = innerWidth || dE.clientWidth || bod.clientWidth; var h = innerHeight || dE.clientHeight || bod.clientHeight; if(top > y(txt)-h){ txtS.display = 'none'; } else{ txtS.display = 'block'; } } 

I left the left material there, just in case, but you can delete it.

Answer 4

 var div=$("#divtochange"); $(window).scroll(function () { var windowpos = $(window).scrollTop(); //---check the console to acurately see what the positions you need--- console.log(windowpos); //--------------------- //Enter the band you want the div to be displayed if ((windowpos >= 0) && (windowpos <= 114)){ div.addClass("AfterScroll"); } else{ div.removeClass("AfterScroll"); }