Jump to content
  • 0

Вертикальный скроллинг. Как зафиксировать навигацию?


Fendia
 Share

Question

Всем добрый день!

Подскажите, как зафиксировать навигацию при прокрутке страниц? Причем, хотелось бы, чтобы при прокрутке страницы шапка исчезала, а меню оставалось. Например, как здесь: http://p120.createme.tk/  -- при нажатии на пункт меню "Услуги", шапка исчезает, навигация -- остается. 

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

Верно, http://bootstrap-ru.com/    

 

Хотя лучше конечно изучить html,css. для начала, ведь если человек задает вопрос как зафиксировать меню значит он не знает  про position:fixed; значит он не силен в css. 

 

Fendia изучить html,css. А потом уже бутстрап , ну а после js))  

Link to comment
Share on other sites

  • 0
ведь если человек задает вопрос как зафиксировать меню значит он не знает  про position:fixed;  

 

Знаю я про position:fixed

 

Скажу по-другому:

вот еще пример сайта: http://www.nlp-marketing.ru/

Подскажите, КАК он работает? Что там стоит? Какой плагин/cкрипт?

Я себе установила скрипт вертикального скроллинга вот такой : http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/

Вроде, все работает. 

Но, как сделать, чтобы меню поднялось вверх при нажатии на пункт меню? вот так: http://savepic.org/6318503.jpg

position:fixed -- пробовала. Если я его применю, получиться вот так: http://savepic.ru/6125477.jpg

 

P.S. без Bootstrap

Edited by Fendia
Link to comment
Share on other sites

  • 0

У вас там отступ где то сверху, гадать можно бесконечно дайте ссылку на ваш сайт.

В инспекторе гляньте что у вас там за отступ.

И еще если делаете меню фикседом наверху то надеюсь не забыли боди паддинг дать ?

Edited by Sergik+
Link to comment
Share on other sites

  • 0

Блин вот если вы не знаете js, зачем вы пытаетесь это реализовать??????  Начинали бы с самых основ js...

 

вот держите скрипт который при прокрутке добавляет к диву menu стиль position:fixed; а если прокрутка меньше чем 50 он ставит ему relative     

 

Секундочку  щас я его доработаю)))

 

Вот    http://jsfiddle.net/3eLozL4f/6/   

 

Тут по клику на ссылку вниз     срабатывает событие lol , которое прокручивает скролл  вниз на 300;

Edited by Daniil Khanin
Link to comment
Share on other sites

  • 0

 

 

А что не устраивает?

 

 

Изначальную позицию меню нужно было высчиать чем то типа offsetTop, а то там статика и не совсем подходящая, по этому и глючит.

Применять стили в JS - тоже лихо. Вы же там вроде классы какие то создавали, почему не создать было отдельный css-класс и не применить ему необходимые свойства?

Link to comment
Share on other sites

  • 0

Блин вот если вы не знаете js, зачем вы пытаетесь это реализовать??????  Начинали бы с самых основ js...

 

вот держите скрипт который при прокрутке добавляет к диву menu стиль position:fixed; а если прокрутка меньше чем 50 он ставит ему relative     

 

Секундочку  щас я его доработаю)))

 

Вот    http://jsfiddle.net/3eLozL4f/6/   

 

Тут по клику на ссылку вниз     срабатывает событие lol , которое прокручивает скролл  вниз на 300;

Нет, ничего не получается. Навигация не фиксируется! 

Link to comment
Share on other sites

  • 0

там логика проста. проверяете js-ом scrollTop у body, если больше определенного значения - добавляете доп класс хедеру. А в стилях - если у хедера есть этот класс прячете ненужные элементы, меняете стили и т.д..

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy