I, I've a website with a fixed logo on the left top corner (the logo is total white). There is a certain point of the homepage with an about div with white background. I need the the logo change with the black version when the about div go over the logo.
I tried to use the scrollTop function with this code:
$(document).ready(function () {
$(window).bind("scroll", function() {
if ($(this).scrollTop() > 1000) {
//function that change the logo
}
});
});
Anyway with that code the function works when there are 1000px form margin top. I need it works when i scroll to that div. Any ideas?
/* UPDATE */ I fixed the code by my own, hope this can help other people.
$(document).ready(function () {
$(window).scroll(function() {
var divTeam = $('#team').offset().top;
if ($(window).scrollTop() > divTeam) {
$('.logo_small').attr("src", "img/logo_small_dark.png");
$('.nav_icon').attr("src", "img/nav_icon_dark.png");
}
else {
$('.logo_small').attr("src", "img/logo_small.png");
$('.nav_icon').attr("src", "img/nav_icon.png");
}
});
});