Прозрачная шапка для сайта?

Question

[JoraInTheSky]

Как называются такие шапки, которые прозрачные когда находятся вверху, при опускании страницы меняют свой бг колор? И, есть какие-то готовые инструменты для реализации такой шапки?
Вот пример шапки: https://p.w3layouts.com/demos/19-02-2016/rental/web/

Answer 1

[campus1]

Сделано это с помощью Jquery. К nav добавляется класс navScroll с белым беком.
Вот этот скрипт делает это:

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop() + 90;
        var currentArea = $("section").filter(function() {
        	return scroll <= $(this).offset().top + $(this).height();
        });
        $(".nav a").removeClass("selected");
        $(".nav a[href=#" + currentArea.attr("id") + "]").addClass("selected");

        if ($(window).scrollTop() > 100) {
            $('nav').addClass("navScroll");
            $('img.logo').addClass("logoScroll");
            $('div.menu').addClass("menuScroll");
        } else if ($(window).scrollTop() < 100 ) {
            $('nav').removeClass("navScroll");
            $('img.logo').removeClass("logoScroll");
            $('div.menu').removeClass("menuScroll");
        }
    });
});

P.S Всегда смотрите dev tools, найдете все что хотите)

Comments

[JoraInTheSky]

Это какой-то сайт с инструментами или что еще? Можно, в двух словах?

[campus1]

JoraInTheSky: Тык. Жмякайте F12 и вуаля)

[Robert Bl]

JoraInTheSky: Почитайте - https://learn.javascript.ru/debugging-chrome
https://learn.javascript.ru/devtools

Answer 2

[Иван]

moyamiller.com/prettySticky

Answer 3

[Robert Bl]

Где TweenMax.to замените на свои действия

$(this).scroll(function() {

      if ($(this).width() < 992 ) {
        var offsetHeight = $(this).scrollTop();

        if ( offsetHeight > 50 ) {
          TweenMax.to( $('header'), 0.3, {css:{backgroundColor: '#fff'}, ease: Back.easeIn} );
        }
        else {
          TweenMax.to( $('header'), 0.3, {css:{backgroundColor: 'transparent'}, ease: Back.easeIn} );
        }
      }
  });

Comments

[Froggyweb]

Подключвть TweenMax для такой мелочи ну не знаю....

[Сергей Горячев]

Froggyweb: Какой твинмакс подключать? Просто заменить слово на свой див. Это ж просто пример.

[Robert Bl]

Froggyweb: Вы думаете я подключал TweenMax ради этого? Это часть кода из проекта.

[Froggyweb]

Сергей Горячев: т.е. если в коде заменить TweenMax на $('#div') все получится?

[Сергей Горячев]

Froggyweb: Ну, с парой-тройкой манипуляций)))

[Robert Bl]

Froggyweb: Тут два условия, если проскроллено больше 50px, то делать одно, иначе другое. Что не понятно?

[Froggyweb]

Robert Bl: человек не понимает как вообще как это сделать а ты ему методы твинмакса подсовываешь. Back.easeIn это кто?

[Robert Bl]

Froggyweb: Вы видели мой комментарий к ответу?