меняющаяся шапка  [РЕШЕНО]

WYSIWYG Web Builder, вопросы которые не охвачены в других разделах.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 4
Аватара пользователя

Автор Темы
jigjig2017
Подающий надежды
Подающий надежды
Сообщения: 131
Зарегистрирован: 11 мар 2017, 20:08
Версия Web Builder: 12.0.2

меняющаяся шапка

Сообщение jigjig2017 » 01 апр 2017, 16:47

http://www.utorrent.com/intl/ru/ вот пример сайта у него шапка очень интересная сначала она прозрачная при прокрутки вниз она чёрная а когда доходит до характеристик в шапке появляется кнопка скачать возможно ли сделать что нибудь похожее на билдере ?

Реклама
Аватара пользователя

anonimus
Moderator
Moderator
Сообщения: 4934
Зарегистрирован: 12 июн 2012, 07:12
Версия Web Builder: 12.0.2
Имя: Анатолий Webmaster
Контактная информация:

меняющаяся шапка  [РЕШЕНО]

Сообщение anonimus » 01 апр 2017, 16:49

делается при помощи якорей, событий на этих якорях и менеджера стилей
**** Аудит ваших проектов (сайтов) на предмет ошибок и различного рода проблем! ****
>>> Ускорение загрузки ваших сайтов >>>
Консультации по WebBuilder, обучение эффективной и главное правильной работе в программе Wysiwig Web Builder.
Решение проблем с вашими проектами, разработка структуры сайта и его функционала, адаптация и оптимизация под мобильные тел и планшеты.
Создание и дизайн сайтов, решение проблем с готовыми сайтами, прочие работы в интернете (домены, хостинг и т.п.)
Оптимизация сайта под продвижение в поисковых системах ( seo )
==============
Skype: onlinebusinesscard.ru
Емаil: mailrobot@wwbmaster.ru
==============

Аватара пользователя

Автор Темы
jigjig2017
Подающий надежды
Подающий надежды
Сообщения: 131
Зарегистрирован: 11 мар 2017, 20:08
Версия Web Builder: 12.0.2

меняющаяся шапка

Сообщение jigjig2017 » 01 апр 2017, 17:15

всё понял спасибо

Аватара пользователя

stedivid
Втянувшийся
Втянувшийся
Сообщения: 65
Зарегистрирован: 11 мар 2017, 08:54
Версия Web Builder: 14.2
Имя: Виталий

меняющаяся шапка

Сообщение stedivid » 02 апр 2017, 09:33

Добрый день. А пример проекта можно посмотреть на якорях как в этом примере приведен. Что бы изучить и понять смысол
Я не волшебник, я только учусь

Аватара пользователя

Alex
Admin
Admin
Сообщения: 3178
Зарегистрирован: 06 фев 2012, 00:03
Версия Web Builder: 14.2.2
Имя: Алексей
Контактная информация:

меняющаяся шапка

Сообщение Alex » 03 апр 2017, 21:15

screenshot 2017-04-03 001.png

dinshapka.zip
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Онлайн-магазин готовых решений
В личке принимаю, только по техническим вопросам! На вопросы по программе в личке не отвечаю!

Аватара пользователя

Alex
Admin
Admin
Сообщения: 3178
Зарегистрирован: 06 фев 2012, 00:03
Версия Web Builder: 14.2.2
Имя: Алексей
Контактная информация:

меняющаяся шапка

Сообщение Alex » 03 апр 2017, 21:27

Или используем PageHeader (Шапка страницы) и размещаем два Html блока:

Первый - Extra Styles
Между тегами <head></head>

Код: Выделить всё

<style>
#PageHeader
{
   position: fixed !important;
   float: none !important;
   -webkit-transition: all 500ms linear;
   -moz-transition: all 500ms linear;
   transition: all 500ms linear;   
}
#PageHeader.affix
{
   background: #222222;
   -webkit-transition: all 500ms linear;
   -moz-transition: all 500ms linear;
   transition: all 500ms linear;   
}
#wb_CssMenu1
{
   top: 5px !important;
   left: auto !important;
   right: 10px;
}
</style>

screenshot 2017-04-03 003.png



Второй - Affix Page Header
До </body>

Код: Выделить всё

<script>
   $("#PageHeader").affix({offset:{top: $("#PageHeader").offset().top}});
</script>

screenshot 2017-04-03 002.png
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Онлайн-магазин готовых решений
В личке принимаю, только по техническим вопросам! На вопросы по программе в личке не отвечаю!


Ответить Вложения 4

Вернуться в «Общие вопросы.»

Кто сейчас на конференции

Сейчас этот форум просматривают: Google [Bot] и 1 гость