Изменение логотипа при прокрутке страницы

При скроллинге страницы изображение (логотип) меняет свой внешний вид.

ВАРИАНТ 1

1. В место, где хотим поставить логотип, например,  в файле index.php:

HTML

<div class="cont"><div class="logo">Header</div><div class="spacer"></div></div>

2. В файл стилей .css ставим стили:

CSS

body {

margin: 0;

}

.cont {

position: relative;

height: 2000px;

background: #eee;

}

.logo {

position: relative;

height: 200px;

background: url(http://вашсайт.ru/images/banners/logo1.png);

color: #fff;

background-repeat:no-repeat;

}

.scrolled .logo {

position: fixed;

top: 0; left: 0;

width: 100%; height: 50px;

background: url(http://вашсайт.ru/images/banners/logo2.png);

float:left;

background-repeat:no-repeat;

}

.scrolled .spacer {

height: 100px;

}

3. Создаем файл с расширением js (например, scrol.js) , закидываем туда код:

JS

$(window).on("scroll", function () {

var scrolled = $(this).scrollTop();

if( scrolled > 107 ) {

$('.cont').addClass('scrolled');

}

if( scrolled <= 107 ) {

$('.cont').removeClass('scrolled');

}

});

 

4. Подключаем между тегами< Head> в файле index.php относительный или абсолютный путь к ява скрипту:

<script type="text/javascript" src="js/scrol.js"></script>

ВАРИАНТ 2

Теперь вариант, где логотип умещается в пределах сайта и не прижимается к левому краю экрана:

Основной логотип ставим в нужное место и не трогаем его. Он уйдет вместе с прокруткой.

А дополнительный логотип добавляем только в позиции скролл, в начальной позиции background будет пустой. При прокрутке он будет появляться.

В index.php ставим код:

HTML

<p align="center"><a href="/"><img alt="" src="http://вашсайт.ru/images/banners/logo1.png"></a></p>

-это наше первоначальное лого. Оно никуда не уходит, просто уходит вверх при прокрутке.

Этот код я поместила в контейнер сайта, чтобы он не уходил за его пределы (под сомнением)

HTML

<div align="center" width=100%>

<div class="cont">

<div class="logo"></div> - начальная позиция лого нет, в стилях его тоже не указываем.

<div class="spacer"></div>

</div></div>

В файл css добавляем стили:

CSS

.logo {

position: relative;

color: #fff;

background-repeat:no-repeat;

max-width: 100%;

}

.scrolled .logo {

position: fixed;

top: 0;

width: 1100px; height: 60px;

background: url(http://вашсайт.ru/images/banners/logo2.png);

background-repeat:no-repeat;

background-color: #161616;

z-index: 1000;

}

.scrolled .spacer {

height: 100px;

}