Плавающее меню, с фиксацией вверху

[kagan25]

не получается сделать вот такое фиксирующее меню, чтобы при пролистывании меню поднималось вверх и там фиксировалось

 

вот пример сайта http://mattweb.ru/demo/fixed_menu/ 

в прикрепленных мои файлы

float.html

float.css

[Launder]

Лучше выложите в песочницу: codepen.io или jsfiddle.net.

 

[andrey7287]

Первое что приходит на ум

 

  fixPosition();
  	$(window).on('scroll', fixPosition);		
  function fixPosition(){

    var offset = 100 - $(window).scrollTop();

    if ( offset <  ) { offset =  };
    $('.sticky').css('top', offset);

  };

Но есть подозрение  что есть более ровный подход.

 

PS Разумеется что бы фикс работал нужно  задать фиксированное позиционирование, и заменить 100 на значение top. Ну и переверстать.

[Launder]

Исходя из той страницы, которую Вы привели, там есть скрипт, который, похоже, как раз за это и отвечает:

	<script>
		var h_hght = 150; // высота шапки
		var h_mrg = ;	  // отступ когда шапка уже не видна
				
		$(function(){
		
			var elem = $('#top_nav');
			var top = $(this).scrollTop();
			
			if(top &gt; h_hght){
				elem.css('top', h_mrg);
			}			
			
			$(window).scroll(function(){
				top = $(this).scrollTop();
				
				if (top+h_mrg &lt; h_hght) {
					elem.css('top', (h_hght-top));
				} else {
					elem.css('top', h_mrg);
				}
			});
		
		});
    </script>

Интересно, такое, в принципе, можно ли сделать средствами CSS...

[Igor Schnaider]

2 часа назад, Launder сказал:

Интересно, такое, в принципе, можно ли сделать средствами CSS...

position: sticky

[by chris]

5 часов назад, Igor Schnaider сказал:

position: sticky

polyfill position: stycky

[kagan25]

13 часа назад, Launder сказал:

Лучше выложите в песочницу: codepen.io или jsfiddle.net.

 

http://codepen.io/stanislas-prime/pen/xrEcj вот пример как хочется чтобы было. нашел много вариантов но ни один не получается сделать

 

[Launder]

@kagan25, вот немного модифицировал пример из интернета. Если Вы понимаете JS, возможно, по готовому решению, Вам будет легче понять.

А вот на чистом CSS.

Edited April 4, 2016 by Launder

[kagan25]

https://jsfiddle.net/Launder/uzp7bsqc/ как сделать чтобы оно вверху оставалось без смещения, можно фиксированным размером но по центру, но хотелось бы чтобы по ширине страницы и таким же оставалось после фиксации?

[Dlynnyj]

/*фиксированное плавающее меню*/
#top_nav{
   top: 150px; /** высота шапки в пикселях**/
   position: fixed;
   z-index: 1000;
   border-bottom:1px dotted #999;
   border-top:1px dotted #999;
   width:990px;
   background:#f0f0f0;
}
#top_nav ul{
	overflow:hidden;
}
#top_nav ul li{
	float:left;
	margin-right:40px;
	list-style:square;
	padding:15px 0;
	color:#666;
}
#top_nav ul li.first{
	margin-left:20px;
}

#top_nav a{
	text-decoration:none;
	color:#666;
	font-family:"Trebuchet MS";
	font-size:.9em;
	border-bottom:1px dashed #666;
}

#top_nav a:hover{
	border-bottom:none;
}

выдрал прямо с кода сайта