X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> ScrollTo
stan07
stan07
Topic Starter сообщение 19.5.2014, 20:37; Ответить: stan07
Сообщение #1


Здравствуйте уважаемые форумчане!

Помогите, пожалуйста , разобраться как сделать панель меню чтобы при заходе на сайт она была посередине экрана, а только когда прокручиваешь ниже его оно прилеплялось к верху экрана, как на этом сайте - http://hochu-tuda.ru/1/
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
сообщение 20.5.2014, 10:07; Ответить: klenovnn
Сообщение #2


Привет
Меню только там не по центру. Вот пример – http://klenovnn.ru/work/html/jackmobile/catalog1.html
Тебе нужны следующие скрипты:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/jquery.localscroll.js"></script>
<script src="./js/jquery.scrollTo-1.4.3.1-min.js"></script>


И из этого файла файла http://klenovnn.ru/work/html/jackmobile/js/common.js выдерни все, кроме .menu где используется.
Принцип работы следующий – по умолчанию это обычная верстка. Когда мы прокручиваем больше чем на 163px
function checkScroll(){
  var html = document.documentElement;
  var html1 = document.body;

  if ((html.scrollTop > 163) || (html1.scrollTop > 163)) {
  $(".wrapper").addClass('scroll');
  }

  else {
  $(".wrapper").removeClass('scroll');
  }
}

Мы для основного дива .wrapper докидываем класс .scroll, а в css у нас прописано, что если этот класс есть, то меню получает параметры position: fixed.
При этом для самого .wrapper мы сверху добавляем padding-top: "высота меню", потому что сначала меню у нас position: relative, а после fixed и все блоки по умолчанию прыгают вверх.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
stan07
stan07
Topic Starter сообщение 20.5.2014, 14:56; Ответить: stan07
Сообщение #3


(klenovnn @ 20.5.2014, 13:07) *
Привет
Меню только там не по центру. Вот пример – http://klenovnn.ru/work/html/jackmobile/catalog1.html
Тебе нужны следующие скрипты:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./js/jquery.localscroll.js"></script>
<script src="./js/jquery.scrollTo-1.4.3.1-min.js"></script>


И из этого файла файла http://klenovnn.ru/work/html/jackmobile/js/common.js выдерни все, кроме .menu где используется.

Принцип работы следующий – по умолчанию это обычная верстка. Когда мы прокручиваем больше чем на 163px
function checkScroll(){
  var html = document.documentElement;
  var html1 = document.body;

  if ((html.scrollTop > 163) || (html1.scrollTop > 163)) {
  $(".wrapper").addClass('scroll');
  }

  else {
  $(".wrapper").removeClass('scroll');
  }
}

Мы для основного дива .wrapper докидываем класс .scroll, а в css у нас прописано, что если этот класс есть, то меню получает параметры position: fixed.
При этом для самого .wrapper мы сверху добавляем padding-top: "высота меню", потому что сначала меню у нас position: relative, а после fixed и все блоки по умолчанию прыгают вверх.


Большое спасибо!
P.S. почему-то у меня сработало без padding-top: "высота меню" ,незнаю вот сайт - Babaika/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Galen
Galen
сообщение 21.5.2014, 15:54; Ответить: Galen
Сообщение #4


(stan07 @ 20.5.2014, 17:56) *
почему-то у меня сработало без padding-top: "высота меню"

Это зависит от конкретной верстки, где-то отступ нужен, где-то нет.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


 



RSS Текстовая версия Сейчас: 7.5.2021, 0:07
Дизайн