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

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

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

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

делается при помощи якорей, событий на этих якорях и менеджера стилей

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

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

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

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

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

screenshot 2017-04-03 001.png

dinshapka.zip

YouTube · Сообщение **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