Прозрачная шапка

Вопросы и ответы по 1С-Битрикс, разборы реальных задач и обсуждение заметок блога. Задайте вопрос или помогите другим — все сообщения проходят модерацию.

idGreen: 13.11.2017 04:00:00

Вечер добрый, у меня есть шапка на сайте:

Скрытый текст

Интересует такой вопрос, подскажите пожалуйста, как можно организовать прозрачный фон, к примеру черный фон и он прозрачный или же белый, тыкните носом меня =)
Только начал общаться с Битриксом.
Спасибо большое!

Михаил Базаров: 14.11.2017 12:00:00

Тут как бы Битрикс не при делах)
Это просто знания верстки
Например черный
background: rgba (0,0,0,0.7)
Первые три нуля это собственно черный
0,7 это не прозрачность
Где 0 - абсолютно не прозрачно а 1 абсолютно прозрачно

Вот тут поподробнее описано http://htmlbook.ru/css3-na-primerakh/poluprozrachnyi-fon

idGreen: 28.11.2017 07:00:00

Подскажите пожалуйста, с шапкой прозрачного вида рязобрался, вроде все хорошо.
Такой вопрос, у меня идет шапка с меню которая привязывается к верху и про прокрутке так же спускается в низ.
В css надо править, а точнее понравилось как у вас меня идет вверх потом лого раздел ну и ниже уже меню, чтоб такое организовать, надо css копать верно? у меня просто идет шапка меню сразу в одном, а дальше слайдер, вот я хочу организовать как у вас, понравилось и красиво =) Поделитесь опытом? Спасибо!

idGreen: 28.11.2017 07:00:00

Делал такое:

Код

#header.affix{
   height:50px;
   background:url(../img/fix_hbg.jpg) no-repeat;
background-color: rgba(0, 0, 0, 1); /*фон меню, шапки*/
   position:relative;
}
#header .navbar {
top: 450px; /** высота шапки в пикселях**/
   position: fixed;
   z-index: 1001;
   border-bottom:1px dotted #999;
   border-top:1px dotted #999;
   width:100%;
background-color: rgba(0, 0, 0, 0.7); /*фон меню, шапки*/
    border: 0;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 0;
    border-radius: 0;
    font-family: 'Montserrat', sans-serif;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

Сместилось, но когда делаю дальше прокрутку она не привязывается к вверху монитора экрана*

Михаил Базаров: 29.11.2017 12:00:00

Цитата
idGreen написал: Делал как описано тут: http://mattweb.ru/moj-blog/javascript-jquery/item/63-fiksiruem-menu-pri-prokrutke-stranitsy Не реклама!

У меня вот такой скрипт. Просто добавляет к блоку с меню еще один селектор "fix" - с помощью него и манипулирую всем меню.

Код

$(document).ready(function() {
    var $div = $("#menu")
    ;
    $(window).scroll(function() {
        if ($(this).scrollTop() > 182 && $div.hasClass("normal")) {
            $div.removeClass("normal").addClass("fix");
        }
        else if ($(this).scrollTop() <= 182 && $div.hasClass("fix")) {
            $div.removeClass("fix").addClass("normal");
        }
    });
});

idGreen: 29.11.2017 06:00:00

Все сделал, вроде получилось, только вот теперь заглох на панель управления битрикса, при свернутой отображается и тп вроде нормально, а вот если развернуть то касяки идут, смещается, даже не знаю как описать)
сейчас вот скрины приложу, думаю вы меня поймете.