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

Question

[adil16]

указываю в стилях css следующие значения для классов:

position: fixed;
		left:0;
		top: 0;
		width: 100%;
		z-index: 999;
		max-width:0px;
		overflow:visible;
		background-color: #f69d01;
		margin: 0;
		transition: 0.25s ease-in;
		-webkit-transition: 0.25s ease-in;
		-moz-transition: 0.25s ease-in;
		-ms-transition: 0.25s ease-in;

меню не фиксируется при прокрутке. код меню в хтмл:

<section class="in_menu_wrapper ">
	<div class="container">
		<div class="row ">
			<div class="col-lg-3 col-md-3 col-sm-3 col-xs-6">
				<div class="in_logo ">
					<a href="index.html">
						<img src="images/logo.png" width="265" height="52" alt="">
					</a>
				</div>
			</div>
			<div class="col-lg-9 col-md-9 col-sm-9 col-xs-6">
				<nav class="navbar">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					
        
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<div class="in_menu nav navbar-nav">
							<ul>
								<li ><a href="index.html">Главная</a></li>
								<li ><a href="#company">О Нас</a></li>
								<li ><a href="#uslugi">Услуги</a></li>
								<li ><a href="#tarif">Тарифы</a></li>
								<li ><a href="#otziv">Отзывы</a></li>
								<li ><a href="#contactus">Контакты</a></li>
								
							</ul>
							
						</div>
					</div>
				</nav>
			</div>
		</div>
	</div>
</section>

Answer 1

[Пашенька]

Уберите max-width:0px;

$(function(){
    $(window).scroll(function() {
        if($(this).scrollTop() >= 66) {
            $('.in_menu_wrapper').addClass('stickytop');
        } else{
            $('.in_menu_wrapper').removeClass('stickytop');
        }
    });
});

.stickytop {
    position:fixed;
    top:0;
    z-index: 2;
}

Comments

[adil16]

ничего не поменялось. сайт china-kargo57.ru

[Пашенька]

adil16, потому что меню на самом деле не fixed. Там надо будет джаваскриптить, чтобы было красиво

[adil16]

like-a-boss, можете подсказать решение:
я создал специальный класс stickytop с фиксированным позиционированием:

.in_menu_wrapper .stickytop {
    position:fixed;
    top:0

и использовал джава:

$(function(){
    $(window).scroll(function() {
        if($(this).scrollTop() >= 290) {
            $('in_menu_wrapper').addClass('stickytop');
        }
        else{
            $('in_menu_wrapper').removeClass('stickytop');
        }
    });
});

но что-то не получается

[Пашенька]

adil16, обновил ответ. Там еще надо на высоту меню давать и отнимать отступ у body чтобы не прыгал сайт. Думаю, с этим справитесь.

[Максим]

adil16, .in_menu_wrapper - точки надо ставить впереди

Answer 2

[adil16]

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