Шапка, плавающая с экраном - Сообщество uCoz

Страница 1 из 1 1
Модератор форума: Yuri_G

Шапка, плавающая с экраном

Шапка, плавающая с экраном

Сообщений: 48

Репутация: 0

Сообщение # 1 | 12:08:44 12 Сен 2013

Приветствую!
Собственно сабж: как грамотно сделать шапку сайта, которая при прокрутке страницы вниз, будет прикреплена к верхнему краю экрана?
на данный момент у меня это реализовано так:

Скрипт (для гостей и пользователей разница в отступе сверху - 24px (админ бар))

Код

<?if($GROUP_ID$='0')?>
    <script type="text/javascript">
    $(function(){
    $(window).scroll(function() {
    var top = $(document).scrollTop();
    if (top > 0) $('.floating').addClass('fixed');
    else $('.floating').removeClass('fixed');
    };);
    };);
    </script>
<?else?>
    <script type="text/javascript">
    $(function(){
    $(window).scroll(function() {
    var top = $(document).scrollTop();
    if (top > 0) $('.floating').addClass('fixed2');
    else $('.floating').removeClass('fixed2');
    };);
    };);
    </script>
<?endif?>

Шапка, непосредственно

Код

<div class="floating"> ШАПКА </div>

CSS

Код

.floating {
    width: inherit;
    z-index: 666;
}

.fixed {
    position: fixed;
    top: 0;
    z-index: 666;
}

.fixed2 {
    position: fixed;
    top: 24;
    z-index: 666;

В этом варианте есть проблемы:

резкое переключение от статичного положения в плавающее
если делать ширину сайта меньше 100%, то статичная шапка получится в размер, а плавающая выходит за пределы

Вот сайт: http://orock.ucoz.ru/
для наглядности сейчас выставил ширину 96%

Сообщение отредактировал rocksalamander - Четверг, 12 Сен 2013, 12:11:03

Разработчик

Сообщений: 2556

Репутация: 1091

Сообщение # 2 | 12:42:50 12 Сен 2013

Цитата (rocksalamander)

резкое переключение от статичного положения в плавающее

Подход не правильный.
Вот я вам написал пример, должен помочь.

Цитата

<html>

<head>
<style>
body {
margin: 0;
badding: 0;
}

#this_wrapper {
position: relative;
margin: 0 auto;
padding: 100px 0 0 0;
width: 90%;
background: green;
min-height: 2000px;
z-index: 5;
}

#this_header {
position: fixed;
top: 0px;
margin: 0 auto;
width: 100%;
background: red;
height: 100px;
z-index: 10;
}

#this_header_value {
margin: 0 auto;
width: 90%;
background: blue;
height: 100%;
}
</style>
</head>

<body>

<div id="this_header">
<div id="this_header_value">
<div style="text-align: center; font-size: 30px; color: white;">Шапка</div>
</div>
</div>

<div id="this_wrapper">
<div style="text-align: center; font-size: 30px; color: white;">Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент Контент
</div>

</div>

</body>

</html>

p.s. http://xhtml.ru/instr/html_editor/ удобный редактор

Читайте книги role.su - Rolesu Authors Workshop.

Сообщений: 681

Репутация: 158

Сообщение # 3 | 13:00:05 12 Сен 2013

rocksalamander, Скрипт в принципе и не нужен, поправьте в ксс стили как я расписал ниже.
#header {
color: #FFFFFF;
margin: 0px 0px 100px;
width: 96%;
}
.floating {
position: fixed;
width: inherit;
z-index: 666;
}

Сообщений: 48

Репутация: 0

Сообщение # 4 | 15:11:09 12 Сен 2013

Sentimo, спасибо, отличный вариант!
[Бриз], за редактор отдельная благодарность)

Шапка, плавающая с экраном

Страница 1 из 1
1

Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!