Как сделать что бы меню фиксировалось более плавно?

Question

[freeman0204]

codepen.io/anon/pen/VaZMdq меню фиксируется но визуально строго, хотелось бы плавно, что бы подъезжало плавнее. Как можно сделать?

Answer 1

[Кот Учёный]

Объявляем в CSS класс sticky:

.menu {
  background-color: blue;
  width: 10%;
  height: 600px;
  
  position: absolute; /* а transition нам не нужен */
}

.menu.sticky {
  top: 0;
  position: fixed;
}

JavaScript:

$(document).ready(function() {
  var menu = $('.menu');
	var menuPosition = menu.offset().top;
  
  $(window).scroll(function () {
		if ($(window).scrollTop() > menuPosition){
			menu.addClass('sticky');
		} else {
			menu.removeClass('sticky');
		}
	});
});

Всё работает.

Comments

[freeman0204]

Я почти не заметил разницы визуально с моим. Хотелось бы что бы оно просто "приземлялось" плавно. когда доходит до меню и все.

[Кот Учёный]

Артур Черешнюк: я предложил иное поведение. В вашем примере меню отправлялось на место постфактум и "своим ходом". В моём примере меню едет вместе с контентом, а достигая верхней границы видимости, прилипает к ней. Ни рывков, ни разъезжаний. Если Вам нужно настраивать более сложную анимацию, то посмотрите вот сюда: easings.net/ru Эти функции можно использовать и как с CSS (сам не разбирался), и как с этим jQuery плагином: gsgd.co.uk/sandbox/jquery/easing — сам буквально вчера этим занимался.