Как сделать плавное position:fixed?

Question

[lemonlimelike]

Вот при скроле

$(document).ready(function(){
 
	$(window).scroll(function(){
		if ($(this).scrollTop() > 60) {
			$('.top_menu').css({'position':'fixed'});
		}else{
			$('.top_menu').css({'position':'none'})
		}
	}); 
});

.top_menu резко переходит в positon:fixed, а как сделать чтоб он плавно переходил, т.е не быстро?

Answer 1

[Andrzej Wielski]

Погуглите css transition

Answer 2

[Bastax13]

Вот это должно вам помочь.
Ну, или гуглите по запросам sticky menu и прилипающее меню

Answer 3

[Exploding]

Так?

$(window).scroll(function(){
    if ($(this).scrollTop() > 60) {
      $('.top_menu').css({'position':'fixed'}).fadeIn(500);
    }else{
      $('.top_menu').css({'position':'none'}).fadeIn(500);
    }
  });

Answer 4

[Web Triton]

html

<header class="header" id="header">
	<nav class="main_nav container">
		<ul class="brand">
			<li><a href="#"><img src="assets/img/logo.png" alt="Logo"></a></li>
		</ul>
		<ul class="main_links">
			<li><a href="#">Главная</a></li>
			<li><a href="#">О нас</a></li>
			<li><a href="#">Проекты</a></li>
			<li><a href="#">Услуги</a></li>
			<li><a href="#">Блог</a></li>
			<li><a href="#">Контакты</a></li>
			<li><a href="#">Оставить заявку</a></li>
		</ul>
	</nav>
</header>

css

.header-fixed {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 99;
}

js

$(function() {
	// FIXED MENU - SCROLL > 200PX
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
			$('#header').addClass('header-fixed');
		} else {
			$('#header').removeClass('header-fixed');
		}
	});
});