Закрепить меню и шапку при скроле для Bartik

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

Здравствуйте!
Делаю липку шапку для Responsive Bartik, которая будет оставаться в верху страницы
Хочу делать по этой инструкции или по этой

Или есть модуль для этого? Не могу найти.
Не знаю, куда помещать тему, в вопросы или задание. Понимаю, что проще сделать, чем объяснить мне как, поэтому если кто-то готов взяться и быстро сделать, то размещаю тему в поиске исполнителей, по цене можно в личку.

Если мне самостоятельно придется делать, по инструкции, то нужно два дива

<div id="headerMain">
 <div id="header">
 div>
div>

И потом для них CSS

#headerMain {
  width:920px;
  height: 195px;
  margin:0px auto;
  z-index:0;
}
 
#header {
  width:920px;
  height: 195px;
  background: url(../img/bg-header.jpg) no-repeat;
  position: fixed;
  z-index: 9999;
}

Мне их добавлять или просто использовать какие-то имеющиеся уже в теме?

В бартике же уже есть регион хедер
Нужно ли мне создавать еще div с id="headerMain"
И куда его помещать?
Если сейчас

То как мне нужно сделать

И где его закрыть
в самом конце тогда

Или все же открывать внутри header

Также у меня еще будет меню, которое я тоже хочу закрепить липко вверху в регионе featured

if ($messages): ?>
   

      print $messages; ?>
   

  endif; ?>

  if ($page['featured']): ?>
   


  endif; ?

Как тогда для него прописать?

Тип материала:
Версия Drupal:
0 Thanks

Комментарии

Аватар пользователя itcrowd72
itcrowd72 1 месяц назад
1

Модули используется для расширения функционала сайта. А всё, что вам нужно это HTML, CSS и, может быть, JS

Аватар пользователя alexo
alexo 1 месяц назад

Спасибо. В моем случае мне нужен человек, который поправит один из способов, основанных на HTML, CSS, JS под мою конкретную тему.

Аватар пользователя VasyOK
VasyOK 1 месяц назад
1

Я так делаю. Может не совсем лаконично, т.к. в JS плаваю. Критика разрешена.

JS

(function($){ //Можно выпендриться с бехейворами, для Drupal-way пуристов
  $(document).ready(function(){  

    var $menu = $("#head-menu");  //контейнер который долже быть закреплен

    if ( $(this).scrollTop() > 20 && $menu.hasClass("default") ){ //20px - высота от которой добавляется класс fixed
        $menu.removeClass("default").addClass("fixed");                
    } else if($(this).scrollTop() <= 20 && $menu.hasClass("fixed")) {
        $menu.removeClass("fixed").addClass("default");                
    }
   
    $(window).scroll(function(){ // то же саоме при скроле страницы вверх вниз.
      if ( $(this).scrollTop() > 20 && $menu.hasClass("default") ){
          $menu.removeClass("default").addClass("fixed");
      } else if($(this).scrollTop() <= 20 && $menu.hasClass("fixed")) {
          $menu.removeClass("fixed").addClass("default");                        
      }
    });//scroll              
   
   
  });
   
})(jQuery);

CSS:

.fixed { /* собственно класс, который делает контейнер закрепленным сверху*/
    position: fixed;
    z-index: 900;
}

Ссылку на сайт, где это можно посмотреть вам кинул в личку.

Нужно ли делать дополнительный контейнер возможно скажут после того как сайт покажете. Я только старый ваш сайт видел.

Аватар пользователя adano
adano 1 месяц назад
2

Бехейворы не для "drupal-way выпендрежа", а для полноценной работоспособности, например при ajax.

Аватар пользователя alexo
alexo 1 месяц назад

Спасибо. Это уже под конкретную тему Bartik? В page.tpl.php первую часть вставить, для второй создать файл css, в него вставить строчки и сам файл добавть в .info?
Так?
Или еще нужно какие-то Id менять где-то. На сайте у меня чистый responsive bartik.
Ничего нигде в шаблнах не правилось (регионы там такие же как в простом bartik вроде)
Или еще нужно "#head-menu" заменить например на название меню или машинное имя или что?
Мне не только способ сам нужен у меня сложность именно с тем чтобы правильно все названия дивов, регионов и т.д. сделать

Аватар пользователя VasyOK
VasyOK 1 месяц назад
1

#head-menu - надо заменить на селектор всей шапки. Скорей всего на #header

Аватар пользователя alexo
alexo 1 месяц назад

Спасибо.
И все это в page.tpl.php?

Аватар пользователя VasyOK
VasyOK 1 месяц назад

В info файле видите как CSS и JS подключаются.
JS - одним файлом.
CSS - можно в любой CSS файл темы вставить

Аватар пользователя alexo
alexo 1 месяц назад

А первую часть Вашего кода куда и как?
Просто создать файл myfile.js например в папке и в него все поместить, потом его добавть как

scripts[] = js/myfile.js

в файл .info?

или прямо в page.tpl.php или drupal_add_js() или или как ?

Аватар пользователя VasyOK
VasyOK 1 месяц назад
1

Оба варианта привильны если в веб инспекторе вы видите что файл подключен. Все-таки в .info правильнее, т.к. шапка сайта на всех страницах. Вот если бы был шаблон для нод определенного типа и на этих нодах JS код обрабатывался, тогда можно и drupal_add_js().

Аватар пользователя alexo
alexo 4 недели назад

Спасибо. Буду пробовать

Аватар пользователя alexo
alexo 4 недели назад

Спасибо. Модуль у меня работает.

Аватар пользователя alexo
alexo 4 недели назад

Я вот еще думаю с точки зрения SEO и всяких примочек типа z-index
Поисковики будут такое считать скрытым текстом?
Какой тогда из имеющихся трех способов лучше: первый css, js от Vasyok, или модуль?
Получается, что с z-index текст как бы просто уходит "под" шапку если делать описанным мною в начале топика способом

Аватар пользователя VasyOK
VasyOK 4 недели назад

alexo, я воплощаю в жизнь и не такую логику. Из-за этого Павел, чьи комменты выше потерли, считает меня некомпетентным.

Аватар пользователя alexo
alexo 4 недели назад

Комменты потерли до того, как ни были мной прочитаны, поэтому я не пойму о чем речь?
про логику модуля или про логику того как поисковики расценят липкую шапку?
Ну вот здесь https://www.apple.com кстати интересно как сделано?
каким способом, это можно через браузер увидеть?
Или они не ориентируются на поисковики?

Аватар пользователя VasyOK
VasyOK 4 недели назад

Про z-index забейте. Попробуйте без него. В случае надобности поставите, если что-то будет перекрывать шаппку при скроле.

Аватар пользователя alexo
alexo 4 недели назад

А остальные способы Вы думаете поисковики не расценят как скрытие текста?
В них под эту липкую шапку не "прячется" текст при скроле?

Аватар пользователя VasyOK
VasyOK 4 недели назад
1

Таким уже сеодвинутым людям делал, пока никто не жаловался.

Аватар пользователя gun_dose
gun_dose 4 недели назад
1
alexo написал:
Я вот еще думаю с точки зрения SEO и всяких примочек типа z-index

Поздравляю! У вас сео-наркомания. Если прочитать тот топик более внимательно, то видно, что человек тестировал разные способы скрытия текста. Да, через z-index можно скрывать текст, но это не значит, что любое применение z-index будет расценено как скрытие текста. То что текст залазит под шапку - не считается скрытием, т.к. при помощи скролла всё равно всё можно просмотреть. Если бы оно работало действительно так, как вы думаете, то СЕО-нисты уже бы давно заставили отовсюду выпилить все колорбоксы, тултипы, дродауны, поповеры, живосайты и всё остальное, под чем случайно может оказаться контент.

Аватар пользователя alexo
alexo 4 недели назад

Ясно. Спасибо.