CODEWITHSUNDEEP
javascripthtmlcss
Lakshay Kalra
Lakshay Kalra

Reputation: 352

Java Script for increasing value onscroll?

I want to create a script in which i want to increase the margin-top of the image on scrolling down the page and vice-versa, but i cant understand where to put the event listener.

So,That when scrolling down the page, the image moves with the scroll and stops before the green div.

document.getElementById("body").addEventListener("scroll", myFunction);
    function myFunction() 
    {
        console.log('scrolled');
    }
#body{
width:100%;
height:3000px;
}
#yellowdiv
{
width:100%;
height:1000px;
background-color: yellow;
}
#image
{
width:50%;
height:500px;
border: 10px solid black;
}
#bluediv
{
width:100%;
height:1000px;
background-color: blue;
}
#pinkdiv
{
width:100%;
height:1000px;
background-color: pink;
}
#greendiv
{
width:100%;
height:1000px;
background-color: green;
}
<div id="body">
    <div id="yellowdiv">
        <img id="image"src="#">
    </div>
    <div id="bluediv">
    </div>
    <div id="pinkdiv">
    </div>
    <div id="greendiv">
    </div>
</div>

P.S - new to JS

Thanks in Advance.

Upvotes: 0

Views: 55

Answers (1)

Harun Yilmaz
Harun Yilmaz

Reputation: 8558

You are trying to attach the event handler to the #body div but you are not scrolling the div, you are scrolling the window.

If you want to attach a scroll-event handler to the div, it must be scrollable. Below you can find an example with a wrapper div #scrollable and the event handler is attached to it.

document.getElementById("scrollable").addEventListener("scroll", myFunction);

function myFunction() {
  console.log('scrolled');
}
#scrollable {
  height: 100px;
  overflow-y: auto;
}

#body {
  width: 100%;
  height: 3000px;
}

#yellowdiv {
  width: 100%;
  height: 1000px;
  background-color: yellow;
}

#image {
  width: 50%;
  height: 500px;
  border: 10px solid black;
}

#bluediv {
  width: 100%;
  height: 1000px;
  background-color: blue;
}

#pinkdiv {
  width: 100%;
  height: 1000px;
  background-color: pink;
}

#greendiv {
  width: 100%;
  height: 1000px;
  background-color: green;
}
<div id="scrollable">
  <div id="body">
    <div id="yellowdiv">
      <img id="image" src="#">
    </div>
    <div id="bluediv">
    </div>
    <div id="pinkdiv">
    </div>
    <div id="greendiv">
    </div>
  </div>
</div>

Upvotes: 2

Related Questions