Antonio Gvardijan Antonio Gvardijan - 9 days ago 6
CSS Question

Changing background color of header and adding logo after certain point

I'm working on a web page that needs its background color to change from transparent to black and adding a logo after after reaching a point scrolling.
I'm new to javascript and I have some problems with this.

Example : http://www.asi.media/

Currently I'm stuck at changing color but can't figure out how to also show the image.

I've tried multiple solutions that I found browsing but none of those worked.

Can you help me little?

HTML:

<body>
<img src="pictures/placeholder1.jpg" id="first_image">
<header>
<img src="pictures/logo.png">
<nav>
<ul>
<li><a href="#">PROIZVODI</a></li>
<li><a href="#">O GALERIJI</a></li>
<li><a href="#">O NAMA</a></li>
<li><a href="#">TIM</a></li>
<li><a href="#">KONTAKT</a></li>
</ul>
</nav>
</header>
<main>


</main>


CSS:

header {
width: 100%;
height: 20%;
font-weight: bold;
position: fixed;
font-size: 14px;
z-index: 100;
background-color: transparent;
}

header img {
float: left;
margin-left: 15%;
height: 80%;
margin-top: 5px;
display: none;
}

#first_image {
width: 100%;
min-width: 1024px;
position: fixed;
top: 0;
left: 0;
z-index: -2;
}


Javascript:

$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 600) {
$("#header").css("background-color", "black");
} else {
$("#header").css("background-color", "transparent");
}
});
});

Answer
$(window).scroll(function() {
  if ($(this).scrollTop() > 600) {
    $("header").css("background", "black");
    $("header img").css('visibility','visible');
  } else {
    $("header").css("background", "transparent");
    $("header img").css('visibility','hidden');
  }
});

https://jsfiddle.net/Thielicious/jykvt19k/

Comments