Меню

Михаил Базаров разработка сайтов на 1С-Битрикс

Главная страница

/ Форумы на сайте Михаила Базарова

/ Форум для свободного общения

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

Внимание! Все сообщения на форуме проходят модерацию. Ваше сообщение появится после проверки.

idGreen: 13.11.2017 16:29:26

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

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

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

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

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

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

idGreen: 28.11.2017 19:12:31

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

idGreen: 28.11.2017 19:51:02

Делал такое:

Код

#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 00:29:49

Цитата
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 18:09:28

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

Правда не ваш использовал скрипт, а тот что выше выкладывал

BBCode Правила

Форма ответов

Ваше имя*

Ваш E-Mail

Текст сообщения*

Перетащите файлы

Ничего не найдено

Загрузить картинки

Показывать графические смайлы в этом сообщении

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

Блог-note: заметки разработчика

Установка Битрикс24 "Интернет-Магазин + CRM" на один домен и настройка работы почты.

Дополнительные параметры в меню Битрикс

Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: Интернет-магазин + CRM" по REST протоколу

Кнопка для отправки на печать карточки товара, без лишних данных

Вывести минимальную цену самого дешевого торгового предложения

Удалить все картинки элементов инфоблока: анонс, детальную и дополнительные картинки (MORE_PHOTO)

Дополнительные опции/услуги, добавляемые в корзину, в карточке товаров

Получить множественное пользовательское поле раздела. Значения множественного UF_ поля через API

Бонус за выполненный заказ на внутренний счет пользователя