Antonio Gvardijan Antonio Gvardijan - 1 year ago 73
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 :

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?


<img src="pictures/placeholder1.jpg" id="first_image">
<img src="pictures/logo.png">
<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>



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;


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

Answer Source
$(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');

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download