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

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

 
Посетитель
small user social cms
Медаль
Сообщений: 228
Здравствуйте уважаемые Форумчане,
на сайте не нашел такой темы, но сталкивался ли кто-нибудь с фиксацией шапки сайта и главного меню при прокрутке страницы, т.е. шапка сайта и меню всегда видна пользователю. Шаблон default версия 1.10.3
Подскажите, пожалуйста, как это можно реализовать. Заранее благодарен.
Редактировалось: 1 раз (Последний: 27 марта 2014 в 14:32)
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
В стилях пропиши в #header position:fixed; И в шаблоне переставь<div id="header"> в <div class="container_12">
Реклама
cms
Посетитель
small user social cms
Сообщений: 29
Lora, Здравствуйте, а как прописать, чтобы только меню было фиксировано.
Строительный портал
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Это будет примерно так. В шаблоне где вставляется модуль меню пишете так:
Код PHP:
  1. <?php if($mod_count['topmenu']) { ?>
  2. <div class="container_12" style="position:relative">
  3. <div class="grid_12" id="topmenu">
  4. <?php $this->printModules('topmenu'); ?>
  5. </div>
  6. </div>
  7. <?php } ?>
А в стилях в #topmenu position:fixed;
Посетитель
small user social cms
Медаль
Сообщений: 228
Lora, ну а если нужно зафиксировать и header и topmenu вместе, есть совет?
Посетитель
small user social cms
Медаль
Сообщений: 228
Lora:

В стилях пропиши в #header position:fixed; И в шаблоне переставь в
Возможно я не совсем правильно выразился, но предложенное вами решение фиксирует блок header поверх topmenu и page в целом. То что необходимо реализовать это что б header отображался в default шаблоне стандартно, но при прокручивании оставался на месте.
Посетитель
small user social cms
Медаль
Сообщений: 434
Я вот так сделал на двойке работает, но надо чутка поправить стили для адаптации под планшетники и мобильники(просто руки не дошли). Под свой дизайн подогнать не проблема. По этому же принципу будет работать и на 1.10.3

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

В main.tpl.php перед </head> вставляете это:
Код PHP:
  1.  
  2. <script>
  3. var h_hght = 50; // высота шапки
  4. var h_mrg = 0; // отступ когда шапка уже не видна
  5. $(function(){
  6. $(window).scroll(function(){
  7. var top = $(this).scrollTop();
  8. var elem = $('#top_nav');
  9. if (top+h_mrg < h_hght) {
  10. elem.css('top', (h_hght-top));
  11. } else {
  12. elem.css('top', h_mrg);
  13. }
  14. });
  15. });
  16. </script>
  17.  
там же в main.tpl.php
это
Код PHP:
  1.  
  2. <nav>
  3. <?php $this->widgets('top', false, 'wrapper_plain'); ?>
  4. </nav>
  5.  
меняете на это:
Код PHP:
  1.  
  2. <nav>
  3. <div id="top_nav">
  4. <?php $this->widgets('top', false, 'wrapper_plain'); ?>
  5. </div>
  6. </nav>
  7.  
в theme-layout.css после:
/* Main Navigation =========================================================== */
добавляете это:
Код PHP:
  1.  
  2. #top_nav{
  3. width: 980px;
  4. margin: 0 auto!important;
  5. top: 50px; /*высота шапки в пикселях*/
  6. background: #34495e;
  7. position: fixed;
  8. z-index: 1000;
  9. }
  10.  
Редактировалось: 1 раз (Последний: 26 марта 2014 в 19:32)
http://aksucity.net
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Если вы имеете ввиду по всей ширин, так?
Фиксация шапки сайта


то верните назад див с хедером, а в стилях укажите хедеру width:100%
Посетитель
small user social cms
Медаль
Сообщений: 228
SE7EN,
SE7EN:
По этому же принципу будет работать и на 1.10.3
Спасибо) я так понимаю что main.tpl.php это template.php? а вот тег nav не понял вообще) Наверно это для двойки(
Посетитель
small user social cms
Медаль
Сообщений: 228
Lora:
Если вы имеете ввиду по всей ширин
Нет Lora че то не выходит все остается прежним, шапка фиксируется но меню и все что ниже поднимается под шапку. Может есть еще подобные решения. А так что б фиксировались и шапка и меню можно сделать на дефолте?
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Ну,блин,так в стилях конечно это надо подправить.я уже не помню как было изначально,но в #topmenu margin-top:70px;попробуй/
Посетитель
small user social cms
МедальПочетный донор проектаКубок зрительских симпатийАвторитет форумаПочетный донор проекта
Сообщений: 2817
ValeraK, замучаете бедного Lora. laugh
Применительно к дефолтному шаблону:
в styles.css добавьте для указанных правил следующие свойства:
1. #header:
Код PHP:
  1.  
  2. position:fixed;
  3. width:100%;
  4. top:0;
  5. z-index:999
  6.  
2. #page
Код PHP:
  1. padding-top:120px;
3. #topmenu
Код PHP:
  1.  
  2. position:fixed;
  3. top:75px;
  4. z-index:999
  5.  
в template.php вот этот код:
Код PHP:
  1.  
  2. <?php if($mod_count['topmenu']) { ?>
  3. <div class="container_12" id="topmenu">
  4. <div class="grid_12">
  5. <?php $this->printModules('topmenu'); ?>
  6. </div>
  7. </div>
  8. <?php } ?>
  9.  
замените на этот
Код PHP:
  1.  
  2. <?php if($mod_count['topmenu']) { ?>
  3. <div class="container_12">
  4. <div class="grid_12" id="topmenu">
  5. <?php $this->printModules('topmenu'); ?>
  6. </div>
  7. </div>
  8. <?php } ?>
  9.  
Редактировалось: 2 раз (Последний: 27 марта 2014 в 22:24)
Украинский для инстант
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
Спасибо Олег Васильевич я, Я пропустил, что и меню надо фиксировать.Сори ValeraK,
Редактировалось: 1 раз (Последний: 27 марта 2014 в 19:24)
Посетитель
small user social cms
Медаль
Сообщений: 228
Олег Васильевич я, спасибо огромное. Только вот теперь при прокрутке суперслайдер отображается поверх меню, а header нормально)
Посетитель
small user social cms
МедальАвторитет форума
Сообщений: 1545
ValeraK:
Только вот теперь при прокрутке суперслайдер отображается поверх меню
А в какой позиции у вас слайдер?
В начало страницы
Предыдущая темаСледующая тема Перейти на форум: