Фіксоване меню при прокручуванні сторінки на css і jquery

Яка суть фіксованого навігаційного меню на сайті? Спочатку наше меню знаходиться на звичному йому місці, десь в шапці, в моєму випадку на відстані 140px від верхнього краю. Як тільки відвідувач прокручує сторінку на ці самі 140px внизу, меню фіксується в самому верху вікна і там залишається решту часу, поки скролл не буде повернений знову в верхнє положення.

Фіксоване меню при прокручуванні сторінки це по суті панель управління, яка завжди з тобою. Меню у нас буде просте, без випадають елементів.

Від теорії до практики. Все досить просто і мінімалістично, велика частина коли віддається стилям, які ви вже самі налаштовуєте під себе. Я зробила фіксоване меню як на малюнку, при Скролл колір меню стає трохи прозорим, щоб воно не виглядало важким і під ним було видно контент.

Наші стилі. У мене меню шириною 1180px, розташоване по центру. Шапка висотою 180px, меню з прокруткою в нього входить і займає 40px. Значить відстань від верху 140px. Запам'ятаємо це число)

І ось ті кілька рядків коду, які творять диво) Ми задаємо умови пересування між об'єктами, вище 140px або нижче. Залежно від цього присвоюється клас fixed для нашого навігаційного меню. А з цим класом, як зазначено вище ми робимо меню фіксованим і закріпленим зверху.

Число 140 ви можете замінити на будь-яке інше. Це ваш відступ меню від верхнього краю.