Фиксация шапки сайта

ЕСТЬ РЕШЕНИЕ ЗАКРЫТО

Как сделать шапку сайта фиксированной при прокрутке?

1
2
Следующая
Показаны 1-15 из 17

#1 26 марта 2014 в 12:53

Здравствуйте уважаемые Форумчане,
на сайте не нашел такой темы, но сталкивался ли кто-нибудь с фиксацией шапки сайта и главного меню при прокрутке страницы, т.е. шапка сайта и меню всегда видна пользователю. Шаблон default версия 1.10.3
Подскажите, пожалуйста, как это можно реализовать. Заранее благодарен.

#2 26 марта 2014 в 13:14

В стилях пропиши в #header position:fixed; И в шаблоне переставь<div id="header"> в <div class="container_12">

Разработка мобильных приложений

#3 26 марта 2014 в 15:52

Lora, Здравствуйте, а как прописать, чтобы только меню было фиксировано.

Строительный портал

Сегодня в 16:43

#4 26 марта 2014 в 16:36

Это будет примерно так. В шаблоне где вставляется модуль меню пишете так:

  <?php if($mod_count['topmenu']) { ?>
            <div class="container_12" style="position:relative">
                <div class="grid_12" id="topmenu">
                    <?php $this->printModules('topmenu'); ?>
                </div>
            </div>
            <?php } ?>

А в стилях в #topmenu position:fixed;

Разработка мобильных приложений

#5 26 марта 2014 в 17:33

Lora, ну а если нужно зафиксировать и header и topmenu вместе, есть совет?

#6 26 марта 2014 в 18:01

В стилях пропиши в #header position:fixed; И в шаблоне переставь в

Lora

Возможно я не совсем правильно выразился, но предложенное вами решение фиксирует блок header поверх topmenu и page в целом. То что необходимо реализовать это что б header отображался в default шаблоне стандартно, но при прокручивании оставался на месте.

#7 26 марта 2014 в 19:31

Я вот так сделал на двойке работает, но надо чутка поправить стили для адаптации под планшетники и мобильники(просто руки не дошли). Под свой дизайн подогнать не проблема. По этому же принципу будет работать и на 1.10.3

для двойки с дефолтным шаблоном

В main.tpl.php перед </head> вставляете это:

 
<script>
        var h_hght = 50; // высота шапки
        var h_mrg = 0;     // отступ когда шапка уже не видна
        $(function(){
        $(window).scroll(function(){
        var top = $(this).scrollTop();
        var elem = $('#top_nav');
        if (top+h_mrg < h_hght) {
        elem.css('top', (h_hght-top));
           } else {
        elem.css('top', h_mrg);
      }
    });
  });
</script>

там же в main.tpl.php
это

 
         <nav>
               <?php $this->widgets('top', false, 'wrapper_plain'); ?> 
         </nav>

меняете на это:

 
         <nav>
	     <div id="top_nav">
               <?php $this->widgets('top', false, 'wrapper_plain'); ?> 
	     </div>
         </nav>

в theme-layout.css после:
/* Main Navigation =========================================================== */
добавляете это:

 
#top_nav{
   width: 980px;
   margin: 0 auto!important;
   top: 50px; /*высота шапки в пикселях*/	
   background: #34495e;
   position: fixed;
   z-index: 1000;
}

http://aksucity.net

#8 26 марта 2014 в 19:44

Если вы имеете ввиду по всей ширин, так?

то верните назад див с хедером, а в стилях укажите хедеру width:100%

Разработка мобильных приложений

#9 27 марта 2014 в 14:24

SE7EN,

По этому же принципу будет работать и на 1.10.3
SE7EN

Спасибо) я так понимаю что main.tpl.php это template.php? а вот тег nav не понял вообще) Наверно это для двойки(

#10 27 марта 2014 в 14:30

Если вы имеете ввиду по всей ширин
Lora

Нет Lora че то не выходит все остается прежним, шапка фиксируется но меню и все что ниже поднимается под шапку. Может есть еще подобные решения. А так что б фиксировались и шапка и меню можно сделать на дефолте?

#11 27 марта 2014 в 15:53

Ну, блин, так в стилях конечно это надо подправить.я уже не помню как было изначально, но в #topmenu margin-top:70px; попробуй/

Разработка мобильных приложений

#12 27 марта 2014 в 18:25

ValeraK, замучаете бедного Lora. laugh

Применительно к дефолтному шаблону:
в styles.css добавьте для указанных правил следующие свойства:
1. #header:

 
position:fixed;
width:100%;
top:0;
z-index:999

2. #page

padding-top:120px;

3. #topmenu

 
position:fixed;
top:75px;
z-index:999

в template.php вот этот код:

 
            <?php if($mod_count['topmenu']) { ?>
            <div class="container_12" id="topmenu">
                <div class="grid_12">
                    <?php $this->printModules('topmenu'); ?>
                </div>
            </div>
            <?php } ?>

замените на этот

 
            <?php if($mod_count['topmenu']) { ?>
            <div class="container_12">
                <div class="grid_12"  id="topmenu">
                    <?php $this->printModules('topmenu'); ?>
                </div>
            </div>
            <?php } ?>

Украинский для инстант

#13 27 марта 2014 в 19:11

Спасибо Олег Васильевич я, Я пропустил, что и меню надо фиксировать.Сори ValeraK,

Разработка мобильных приложений

#14 28 марта 2014 в 11:15

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

#15 28 марта 2014 в 12:08

Только вот теперь при прокрутке суперслайдер отображается поверх меню
ValeraK

А в какой позиции у вас слайдер?

Разработка мобильных приложений

1
2
Следующая
Показаны 1-15 из 17

один браузер - много проблем

Украшения на сайт на 1 апреля

Фиксация шапки сайта

Похожие темы

Фиксация целого блока для виджетов

[ЗАКРЫТО] Настройка шапки сайта, через панель администратора.

Неккоректный вид шапки на дефолтном шаблоне на мобильном

Как в новом шаблоне вместо шапки вставить картинку?

[ЕСТЬ РЕШЕНИЕ] Замена фона шапки

Закрепление верной шапки в мобилной версии

InstantCMS Team

О проекте

Поддержка

Дополнения