Изменение цвета фона заголовка и добавление логотипа после определенного момента

Я работаю над веб-страницей, которая нуждается в ее цвете фона, чтобы перейти от прозрачного к черному и добавить логотип после достижения точки прокрутки. Я новичок в javascript, и у меня есть некоторые проблемы с этим.Изменение цвета фона заголовка и добавление логотипа после определенного момента

Пример: http://www.asi.media/

В настоящее время я застрял на изменение цвета, но не может понять, как же показать изображение.
Я пробовал несколько решений, которые я нашел в браузере, но никто из них не работал.

Помогите мне немного?

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 (Jquery):

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

источник

2016-11-26 Antonio Gvardijan

он должен быть '$ ('header')' not '$ ('# header')' – Thielicious

@Thielicious он все еще не работает ... –

проверить мой ответ @ Антонио Гвардиян – Thielicious

$(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/

источник

2016-11-26 18:31:40 Thielicious

Изменение цвета фона заголовка и добавление логотипа после определенного момента

ответ

Смежные вопросы