Becky Becky - 8 months ago 20
Javascript Question

How to get an image to gain an opacity as the page is scrolled down

I came across a cool feature I saw on a site. When you scroll down the main image on the page gains a dark opacity. I know how to add opacity, but specifically how do I add the opacity with the scroll?

<div id="home-main-img">
    <img src="" alt="Demolition and Wrecking" id="demolition1">

<div class="height">

#home-main-img img{
    width: 100%;
    height: auto;
    margin: 0;

#home-main-img {
  background: #000;

.height {

var scrollPosition = $(this).scrollTop();
var docHeight = $(document).height();
var diff = docHeight - scrollPosition;