I am using GSAP for animation, I need on scroll animation when the user scrolls the mouse wheel. Now animation is working on page load. I need content should animate on the scroll. First two articles are working but when I scroll it than animation is not working.
(function() {
var content = document.getElementById("content");
var xScroll = 0; // initialize
function scrollHorizontally(e) {
xScroll = xScroll+e.deltaY*20;
// set limits to avoid overshooting and stucking at beginning or end
var max = document.getElementById("content").innerWidth;
if (xScroll <= 0) {
xScroll = 0;
} else if (xScroll >= max) {
xScroll = max; //replace with the width of the scrollable container
}
// scroll smooth to xScroll
TweenLite.to(content, 1, { ease: Power1.easeOut, scrollTo:{x:xScroll} });
var rt = ($(window).width() - ($(".active_05").offset().left ));
if(rt>200)
{
$(".about_menu").addClass("active");
}
else
{
$(".about_menu").removeClass("active");
}
e.preventDefault();
}
if (content.addEventListener) {
// Standard
content.addEventListener("wheel", scrollHorizontally, false);
} else {
// IE 6/7/8
content.attachEvent("onmousewheel", scrollHorizontally);
}
var article_1=document.getElementById("article_1");
TweenLite.from(article_1, .5, { ease: Power0.easeOut, y: 10 });
var article_2=document.getElementById("article_2");
TweenLite.from(article_2, .5, { ease: Power0.easeOut, y: 10 });
var article_3=document.getElementById("article_3");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
var article_3=document.getElementById("article_4");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
var article_3=document.getElementById("article_5");
TweenLite.from(article_3, .5, { ease: Power0.easeOut, y: 15 });
})();
#content {
position:fixed;
display: inline-block;
overflow-x: scroll;
width: 100%;
overflow-y: hidden;
top: 0;
right:0;
height: 100%;
}
#content #horizontal_scroll{
overflow: hidden;
width:400%;/*to increase the width */
}
#horizontal_scroll .full_screen_100
{
height: 100%;
background-color: #fff;
display: flex;
}
#horizontal_scroll .full_screen_100 article{
width: 900px;
height: 100%;
float:left;
border-left: solid 1px #E2E2E2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenLite.min.js"></script>
<div id="content">
<div id="horizontal_scroll" id="scroll_container">
<div class="full_screen_100">
<article>
<p id="article_1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</article>
<article>
<p id="article_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p id="article_3">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
<p id="article_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p id="article_5">consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</div>
</div>
use GSAP with scrollmagic.Check this examples Gsap with scroll animation
Related
Context:
I have a subtitle "About me" that animates with the library animejs as soon as it comes into view in the screen (every time). You can find the animation here, i got it from Tobia's Moving Letters.
The problem:
As I scroll down to the subtitle, I'm able to see it right before the animation plays. So in other words: I scroll down, I read the subtitle "About me" and then it disappears just to have the letter pop in one by one.
This isn't want, I am looking for a way to have the initial text "About me" hidden and then have each animated letter appear
I made a snippet with the subtitle under some dummy text so it can be scrolled into.
// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const subtitle_animation = anime({
targets: '.subtitle .ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 100 * i + 500
})
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true
document.addEventListener('scroll', function () {
isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
if (aboutme_vis && ready_to_play) {
subtitle_animation.restart();
ready_to_play = false
}
if (!aboutme_vis){
ready_to_play = true
}
});
/* Subtitle Animation */
.subtitle .ml6 {
position: relative;
font-size: 1em;
}
.ml6 .text-wrapper-subtitle {
position: relative;
display: inline-block;
padding-right: 10%;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}
<div class="">
<h1>Title</h1>
<p>The subtitle About me can be found below! </p>
<h2>Random text so its possible to scroll: </h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
</div>
<div class="row main-margin" id="about-me">
<h1 class="subtitle">
<span class="ml6">
<span class="text-wrapper-subtitle">
<span class="letters">About me</span>
</span>
</span>
</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
As a bonus, I would like a way to hide the text again every time it is scrolled out of screen.
This is my first StackOverflow question! I hope anyone can help me 😬
So there's most likely a better solution than this out there to be honest. But that's a quick way I found to get near to what you want. The problem with this is, that if it's in the viewport from the beginning and no scrolling occurs it will never show. You'll have to handle that.Using an IntersectionObserver would probably be a better fit for your case here.
// Wrap every letter in a span
var textWrapper = document.querySelector('.subtitle .ml6 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");
const subtitle_animation = anime({
targets: '.subtitle .ml6 .letter',
translateY: ["1.1em", 0],
translateZ: 0,
duration: 750,
delay: (el, i) => 100 * i + 500
})
function isInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const aboutme = document.getElementById('about-me');
let aboutme_vis = false
let ready_to_play = true
document.addEventListener('scroll', function () {
isInViewport(aboutme) ? aboutme_vis = true : aboutme_vis = false;
if (aboutme_vis && ready_to_play) {
subtitle_animation.restart();
setTimeout( () => {
aboutme.style.visibility = "visible";
} );
ready_to_play = false
}
if (!aboutme_vis){
aboutme.style.visibility = "hidden";
ready_to_play = true
}
});
/* Subtitle Animation */
.subtitle .ml6 {
position: relative;
font-size: 1em;
}
.ml6 .text-wrapper-subtitle {
position: relative;
display: inline-block;
padding-right: 10%;
overflow: hidden;
}
.ml6 .letter {
display: inline-block;
line-height: 1em;
transform-origin: 0 0;
}
#about-me {
visibility: hidden;
}
<div class="">
<h1>Title</h1>
<p>The subtitle About me can be found below! </p>
<h2>Random text so its possible to scroll: </h2>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
<p>
</div>
<div class="row main-margin" id="about-me">
<h1 class="subtitle">
<span class="ml6">
<span class="text-wrapper-subtitle">
<span class="letters">About me</span>
</span>
</span>
</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
I need to get the max number of pixel that scrolled in the page.
I've tried window.pageXOffset but it return the atual scrolled , I need the full size always
Due to this link
EDIT: Congratulation you have solve it. I have include more example for you.
let scrollLength = document.documentElement.scrollWidth-document.documentElement.clientWidth
myFunction();
window.addEventListener('scroll', myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Pos: "+window.pageXOffset+"/"+scrollLength;
}
body{
margin: 0;
width: 1000px;
color: lightgray;
}
#demo{
color: black;
position:fixed;
top:0;
right:0;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a id="demo">xxx</a>
I just solve this using
document.documentElement.scrollWidth - document.documentElement.clientWidth;
I am trying to program a little script which should change the active tab when the offset of the current section is <= 0. I am running a function on every scroll event which should get the distance of every section in the body and calculate the current distance - if the distance is 0, it should be updated and the appropriate element should be set active.
I searched the web and found this solution - however the distance does not change and stays the same.
function scrollPage() {
var sections = document.getElementsByTagName('section');
for (var i = 0; i < sections.length; i++) {
console.log(sections[i].offsetTop - document.body.scrollTop);
}
}
html {
width: 100%;
}
body {
height: 100%;
margin: 0;
}
.body {
position: absolute;
height: auto;
width: auto;
padding-top: 32px;
padding-bottom: 8px;
margin: 48px 0 72px 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: scroll;
}
<html>
<body>
<div class="body" onscroll="scrollPage()">
<section id="section1">
<h1>Text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
<section id="section2">
<h1>Other text</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</section>
</div>
</body>
</html>
I know that there are ways to do this with JQuery - however I would like to avoid using JQuery so I would be happy if somebody can point out my error.
Best regards and thank you in advance,
I have a div that will become fixed temporarily as then user scrolls down the page. This div has its width set to 100% so that it completely fills up its parent and so that it is responsive.
When the div becomes fixed it's width changes from 100% of its parents width to 100% of the viewport width.
How can I maintain the div's width when it becomes fixed? Note I cant just set its width to a pixel value because the screen/viewport/browser window may become resized.
$(document).ready(function () {
var CONTAINER = $("#container");
var FIXED_SLIDE = $('.fixed-slide').first();
var CONTAINER_TOP = CONTAINER.offset().top;
var CONTAINER_HEIGHT = CONTAINER.height();
var FIXED_HEIGHT = FIXED_SLIDE.height();
var MAX_Y_POS = CONTAINER_TOP + CONTAINER_HEIGHT - FIXED_HEIGHT;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop < CONTAINER.offset().top) {
FIXED_SLIDE.css('position', 'relative');
}
else if (scrollTop > MAX_Y_POS) {
FIXED_SLIDE.css('position', 'relative');
}
else FIXED_SLIDE.css('position', 'fixed').css('top', '0px');
});
});
#container {
position: relative;
width: 250px;
height: 1500px;
background-color: #ddd;
}
.fixed-slide {
position: relative;
width: 100%;
height: 500px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!-- We only have control over changing this div and its children.
All other elements on the page we cannot edit or change -->
<div id="container">
<div class="fixed-slide">
<p>When I touch the top of the viewport I am fixed. How can I maintain my dimensions when fixed?</p>
</div>
</div>
<!-- Lots of Static main page content here. If I were to make .fixed-slide fixed this content would now popup
and appear underneath the header content - naughty - not to mention that .fixed-slides dimensions
will change. Thus the need for margin-top instead -->
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
$(document).ready(function () {
var CONTAINER = $("#container");
var FIXED_SLIDE = $('.fixed-slide').first();
var CONTAINER_TOP = CONTAINER.offset().top;
var CONTAINER_HEIGHT = CONTAINER.height();
var FIXED_HEIGHT = FIXED_SLIDE.height();
var MAX_Y_POS = CONTAINER_TOP + CONTAINER_HEIGHT - FIXED_HEIGHT;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if (scrollTop < CONTAINER.offset().top) {
FIXED_SLIDE.css('position', 'relative');
}
else if (scrollTop > MAX_Y_POS) {
FIXED_SLIDE.css('position', 'relative');
}
else FIXED_SLIDE.css('position', 'fixed').css('top', '0px');
});
});
anytime you can get actual size of window by the methods: .clientWidth, .clientHeight
You can set it to a pixel value if you update on window resize, which is an event you can listen for.
Here is a JS Fiddle demonstrating resizing the div pixel value based on the window changing:
https://jsfiddle.net/7j6w9ghe/
JavaScript:
$(function () {
var div = $('#MrFixed');
adjustSize(div);
$(window).resize(function () {
adjustSize(div);
});
function adjustSize(div) {
div.width(div.parent().width());
}
});
Html:
<section>
<article>
<div id="MrFixed">
<p>I'm fixed. Resize page I will too.</p>
</div>
</article>
</section>
Css:
section {
width:100%
}
article {
border:1px solid black;
height:3000px;
width:75%;
}
div {
background-color:red;
height:200px;
width:100%;
position:fixed;
}
div p {
color:white;
}
I am new to JavaScript and tried a simple code (in pure JavaScript)
I made a code to make an invisible block of text ( display:none; ) to be made visible ( display:block; ) when the user scrolls past a point, say 300px.
Here is my complete code
<!DOCTYPE html>
<html>
<head>
<style>
body{
position: absolute;
}
p{
margin-top: 300px;
margin-left: 50%;
display: none;
}
</style>
<script type="text/javascript">
onscroll = function() {
if (scrollTop > 400) {
getElementById('p').style.cssText ="display:block;";
} else {
if {
getElementById('p').style.cssText ="display:none;";
}
}
};
</script>
</head>
<body>
<p id="p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</body>
</html>
window.onscroll = function() {
if (window.scrollY > 400) {
document.getElementById('p').style.cssText ="display:block;";
} else {
document.getElementById('p').style.cssText ="display:none;";
}};
i have removed empty if block ,it was without condition
scrollTop is not there in DOM API its scrollY
for best cross browser solution ;use jquery scrollTop function
Fiddle demo
JQuery
$(document).scroll(function(){
if($("body").scrollTop()>=200)
{
$("#p2").css("display", "block");
}
})
HTML
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p id="p2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
CSS
body {
position: absolute;
}
p
{
line-height:90px;
background-color:yellow;
}
p#p2 {
display: none;
background-color:orange;
}
Here the 2nd <p> element is by default hidden and when body scrolls down 200 px it comes in display.