Меню

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

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

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

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

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

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

RSS

Прозрачная шапка, фон и прозрачная шапка

idGreen

Гость

Это нравится: 0 Да / 0 Нет

13.11.2017 16:29:26

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

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

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

Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 2138 Баллов: 900 Рейтинг: 2 Регистрация: 07.11.2013

Это нравится: 0 Да / 0 Нет

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

Гость

Это нравится: 0 Да / 0 Нет

28.11.2017 19:12:31

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

Цитировать Имя

idGreen

Гость

Это нравится: 0 Да / 0 Нет

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;
}

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

Цитировать Имя

Михаил Базаров

Администратор

Сообщений: 2138 Баллов: 900 Рейтинг: 2 Регистрация: 07.11.2013

Это нравится: 0 Да / 0 Нет

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 Гость	#6 Это нравится: 0 Да / 0 Нет 29.11.2017 18:09:28 Все сделал, вроде получилось, только вот теперь заглох на панель управления битрикса, при свернутой отображается и тп вроде нормально, а вот если развернуть то касяки идут, смещается, даже не знаю как описать) сейчас вот скрины приложу, думаю вы меня поймете. Правда не ваш использовал скрипт, а тот что выше выкладывал
	Цитировать Имя

Читают тему

BBCode Правила

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

Ваше имя*

Ваш E-Mail

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

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

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

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

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

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

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

Дать пользователю возможность быстро отредактировать материал

AJAX корзина с отправкой количества из раздела каталога

Список новостей с автопрокруткой через overflow:scroll

Вывести все разделы в которых находится элемент инфоблока

Обновить страницу Inapbrowser в приложении Apache Cordova, при выходе из фона

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

Фотогалерея на шаблоне новостей в 1С-Битрикс

Переключатель валюты в каталоге 1С-Битрикс

Сгенерировать скидочные купоны, при заказе и отправить на почту