CODEWITHSUNDEEP
javascriptjquerycss
user2252219
user2252219

Reputation: 865

Get background color of div to fade into a different color when anchor reaches top of page

I'm trying to get the background color to fade change when the anchor-point is scrolled to the top of the page.

<div id="footer_wrap">
<div class="anchor-point"> </div>

#footer_wrap {
margin-top: 200px;
height: 130vmax;
background-color: #f4f4f4;
opacity: 1;
transition-delay: 0s;
transition: ease-in-out .3s
}

#footer_wrap.topper {
transition: visibility 0s ease-in-out 0.3s, opacity 0.3s ease-in-out;
opacity: 0;
background-color: #000;
visibility: hidden
}


var scrollFn = function() {
var targetOffset = $(this).find(".anchor-point")[0].offsetTop;
console.log('Scrolling...');
if ($(this).scrollTop() > targetOffset) {
$(this).find(".#footer_wrap").addClass("topper");
} else {
$(this).find("#footer_wrap").removeClass("topper");
}
};

https://jsfiddle.net/t6tyjbz5/

Upvotes: 0

Views: 667

Answers (2)

Josh Sanger
Josh Sanger

Reputation: 804

Your code had a few issues with it:

  1. You were never assigning the scroll function to the window scroll event
  2. Syntax errors / non-functions (lines: 2 & 5)
  3. The way you were using $(this) was incorrect. As it was, $(this) would have never been set because it wasn't assigned, and when it was assigned it would refer to the window.

Corrected Javascript:

function scrollFn() {

  var targetOffset = $(".anchor-point").offset().top;
  var w = $(window).scrollTop();

  if (w > targetOffset) {
    $("#footer_wrap").addClass("topper");
  } else {
    $("#footer_wrap").removeClass("topper");
  }
};
$(window).on('scroll', scrollFn);

Also, the if you wanted to change the background color, the css would be much simpler:

#footer_wrap {
  margin-top: 200px;
  height: 130vmax;
  background-color: #f4f4f4;
  transition: background 0.3s ease-in-out ;
}
#footer_wrap.topper {
  background-color: #a0a0a0;
}

Working Fiddle: https://jsfiddle.net/t6tyjbz5/5/

Upvotes: 1

AustinPhillipTaylor
AustinPhillipTaylor

Reputation: 300

I messed around with it for a bit and got this jquery to work...

$(window).scroll(function() {

    var targetOffset = $(".anchor-point")[0].offsetTop;

    if ($(window).scrollTop() > targetOffset) {

        $("#footer_wrap").addClass("topper");

    } else {

        $("#footer_wrap").removeClass("topper");

    }
});

In your original code you were never listening for the scroll event $(window).scroll(), so your function was never being called. As well, I removed $(this) and .find as they were unnecessary in this context. It makes more sense to use $(window) as opposed to $(this) since we're listening for the scroll value of the entire document. Alternatively, if you planned on using this within another div that was meant to scroll, then you would use the selector for that parent div in place of $(window).

Your css would look more like this if you only wanted to fade the background.

#footer_wrap {
    margin-top: 200px;
    height: 130vmax;
    background: #f4f4f4;
    transition: background 1s ease-in-out;
}

#footer_wrap.topper {
    background: #000;
    transition: background 1s ease-in-out;
}

Upvotes: 1

Related Questions