Прилепленное меню

Делаем шапку сайта (включающую логотип, меню и контакты) прилепленной к верхнему краю экрана, при перемотке сайта вниз.

Оборачиваем необходимый для «прилеплевания» блок в div id=»stick_menu».

В данном сайте верстка такая:

<div style="height: 1px;"></div>
<div id="header">
<div id="stick_menu">

<div class="head-order">
<div id="logo"><a href="<?php bloginfo('url'); ?>"><img class="visible" src="<?php echo get_theme_mod( 'true_logo' ); ?>"></a></div>
<div id="slogan"><table><tr><td><?php bloginfo('description'); ?></td></tr></table></div>
<div id="phone"><table><tr><td><i class="fa fa-phone"></i> <?php echo get_theme_mod( 'true_phone' ); ?></td></tr></table></div>
<div id="mail"><table><tr><td><a href="mailto:<?php echo get_theme_mod( 'true_email' ); ?>"><i class="fa fa-envelope-o"></i> <?php echo get_theme_mod( 'true_email' ); ?></a></td></tr></table></div>
</div>

<div id="nav-block">
<div id="navigate">

<nav role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?>
<li class="menu-item call-item" style="cursor:pointer;"><a><i class="fa fa-phone"></i> Звонок</a></li>
<li class="menu-item search-item" style="cursor:pointer;"><a><i class="fa fa-search"></i> Поиск</a></li>
</nav>

</div>
</div>

</div>
</div> <!-- конец header -->

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

<div style="height: 1px;"></div>

Script

$(document).ready(function() {

// Прилепленное меню

if($("div").is("#stick_menu")) {

var start_pos=$('#stick_menu').offset().top;
 $(window).scroll(function(){
  if ($(window).scrollTop()>=start_pos) {
      if ($('#stick_menu').hasClass()==false) $('#stick_menu').addClass('to_top');
  }
  else $('#stick_menu').removeClass('to_top');
 });

}

});

CSS

/*Приклееное меню*/

.to_top {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99;
  background-color: rgba(0, 0, 0, 0.7);
}

.to_top li{
line-height: 20px !important;
font-size: 12px;
font-weight: bold;
transition: line-height 0.5s, background-color 0.5s, border 0.5s;
-webkit-transition: line-height 0.5s ease 0s, background-color 0.5s ease 0s, border 0.5s ease 0s;  
}

#stick_menu {
    float:left;
    width:100%;
    list-style:none;
    font-size: 12px;
    width: 80%;
    padding: 0 10%;
    background-color: rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 16px #000;
}    

#stick_menu li {
    float:left;
    position:relative;
    display:block;
    width: 10%;
    line-height: 40px; 
    box-sizing: border-box;
    border-top: 2px solid rgba(255, 255, 255, 0);
    transition: line-height 0.5s, background-color 0.5s, border 0.5s;
    -webkit-transition: line-height 0.5s ease 0s, background-color 0.5s ease 0s, border 0.5s ease 0s;
}

#stick_menu li a {
	display:block;
	padding: 2px 10px;
	color:#fff;
	text-decoration:none;
        position: relative;
}

Чтоб менялись свойства элементов входящих в прилепленный header при прокрутке вниз надо добавлять свойства CSS, примеры:

#logo img {
width: 70%;
float: left;
transition: width 0.5s ease;
-webkit-transition: width 0.5s ease 0s;  
}

.to_top #logo img {width: 35%;}

#slogan table, #phone table, #mail table {
    vertical-align: middle;
    height: 50px;
    transition: height 0.5s ease;
    -webkit-transition: height 0.5s ease 0s; 
}
  
.to_top #slogan table, .to_top #phone table, .to_top #mail table {height: 25px;}

#nav-block {
  float: left;
  position: relative;
  width: 100%;
  height: 40px;
  transition: height 0.5s ease;
  -webkit-transition: height 0.5s ease 0s;
}

.to_top #nav-block {height: 30px;}

Поделиться в соц. сетях: