Можно ли сделать закрепленную шапку с исчезающим отступом при скроле вниз?

Question

[Матвей Томилов]

Доброго времени суток, хотелось бы сделать шапку сайта так, что бы она была закреплена с отступом 50px от верха сайта, но при скроле вниз, он(отступ)исчезал, а шапка закреплялась вверху страницы и оставалась там. Соответственно при возвращении наверх отступ снова появлялся.

Answer 1

[Сергей Жубартович]

var nav = $('.nav');
$(window).scroll(function() {
  if ($(this).scrollTop > 0) {
    nav.addClass('sticky');
  } else {
    nav.removeClass('sticky');
  }
});

А для класса .sticky уже какие нужны стили можно задать

Comments

[Матвей Томилов]

А можно для совсем непросвященных маленький пример, что и куда?

[Сергей delphinpro]

etozhematvekat: совсем непосвященным нельзя в код лезть. можно всё поломать.

[Максим Тимофеев]

etozhematvekat: Так это и есть пример, даже готовое решение. Но надо иметь хотя бы 2 часа опыт работы с js и css. И хотя бы по 2 абзаца прочитать из учебников.

[Матвей Томилов]

Максим Тимофеев: перечитайте, пример что и куда. Делал все как в учебнике, но у меня упорно при скроле не срабатывает sticky

[Максим Тимофеев]

etozhematvekat: да там две описки, ниже ответил

Answer 2

[Максим Тимофеев]

https://jsfiddle.net/qLp6d2pp/1/

Comments

[Матвей Томилов]

Извините, что отвечаю так поздно, но вот как раз тот момент, когда я во всем этом(чуть чуть больше) разбираюсь.
Это очень круто.