-1

I want to have a div that fades in when you have scrolled a certain amount of pixels, without using jquery, only using javascript.

Dogantr
  • 17
  • 7
  • 1
    Hi @Dogantr - welcome to StackOverflow. I'm afraid that a question like this will generally get downvoted and closed. StackOverflow is not a code writing service-- instead, you ask specific question seeking specific answers. Please see http://stackoverflow.com/help/how-to-ask – Alexander Nied Feb 27 '17 at 20:43

2 Answers2

0

To get the scroll position from top, you can use the document.pageYOffset property. To fade something in, you have to use a setInterval, you can see it here:

How to do fade-in and fade-out with JavaScript and CSS

Community
  • 1
  • 1
Damien Flury
  • 769
  • 10
  • 23
0

Jquery is Javascript, so unless you loop a listener (for scroll) in JS to change something in the document object model, you will find yourself having to use HTML5 (css3 and some jquery), like this (From Codepen)

HTML

<div class="top"><div class="title">Fade Away</div></div>

CSS

body {
  margin: 0;
  height: 1000px;
}

.top {
  margin: 0;
  position: relative;
  width: 100%;
  background-color: #aaa;
  height: 300px;
  opacity: 1;
  text-align: center;
  font-family: 'helvetica';
  font-size: 80px;
  font-weight: 100;
  color: #fff;
}

.title {
  position: absolute;
  top: 60%;
  left: 100px;
}

JS

$(window).scroll(function(){
    $(".top").css("opacity", 1 - $(window).scrollTop() / 250);
  });

There are several pre-written parallax scripts you can use, like this one called skrollr, which will enable you to just add a reference to the JS file and then add CSS to your page code: https://prinzhorn.github.io/skrollr/

I hope that helps you get started!

J9Fackque
  • 58
  • 7