@JoraInTheSky

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

Как называются такие шапки, которые прозрачные когда находятся вверху, при опускании страницы меняют свой бг колор? И, есть какие-то готовые инструменты для реализации такой шапки?
Вот пример шапки: https://p.w3layouts.com/demos/19-02-2016/rental/web/
  • Вопрос задан
  • 1450 просмотров
Решения вопроса 2
@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, найдете все что хотите)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@Robert_blk
JS-программист
Где 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} );
        }
      }
  });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы