Фиксированый header на Jquery

339
27 января 2017, 07:05

Здравсвуйте,зделал фикированый header на jquery. Заметел что при прокрутки на начале страницы он неприятно дергается. Подскажите пожалуйста,как это можно решить?

$(document).scroll(function() { 
    if ($(document).scrollTop() > $('.top_header').outerHeight() ) 
 { 
 
      $(' .right_nav .reservations a:last-child').hide(300); 
    } else { 
      $(' .right_nav .reservations a:last-child').show(200); 
    } 
  });
header { 
  background-color: pink; 
  position: relative; 
} 
header .top_header { 
  text-transform: uppercase; 
  width: 100%; 
  position: fixed; 
  z-index: 2; 
  font-family: DINPro-Light, sans-serif; 
  font-size: 1.375em; 
  line-height: 60px; 
  color: #fff; 
  transition: all 0.4s ease; 
  margin: 0; 
} 
header .top_header .left_nav { 
  float: left; 
} 
header .top_header .left_nav .menu { 
  display: inline-block; 
  background-color: grey; 
  cursor: pointer; 
  margin-right: -6px; 
  max-width: 60px; 
  padding: 0 12px; 
} 
header .top_header .left_nav .menu img { 
  padding: 0 8px; 
  width: 55px; 
} 
header .top_header .left_nav .tel { 
  background-color: rgba(0, 0, 0, 0.5); 
  display: inline-block; 
  padding: 0 16px; 
} 
header .top_header .right_nav { 
  float: right; 
} 
header .top_header .right_nav .reservations { 
  display: inline-block; 
  background-color: #cba673; 
  padding: 0 15px; 
} 
header .top_header .right_nav .reservations img { 
  width: 27px; 
} 
header .top_header .right_nav .language { 
  margin-left: -6px; 
  width: 60px; 
  padding: 0 9px; 
  display: inline-block; 
  background-color: blue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
  <div class="top_header"> 
    <div class="left_nav"> 
      <div class="menu"> 
        ||| 
      </div> 
      <div class="tel"> 
        +38 097 060 05 57 
      </div> 
    </div> 
    <div class="right_nav"> 
      <div class="reservations"> 
        <a href="#">[|||]</a> 
        <a href="#">Забронировать</a> 
      </div> 
      <div class="language"> 
        Eng 
      </div> 
    </div> 
  </div> 
  <div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
  </div> 
</header>

Пример на codepen

Answer 1
.reservations a {
    vertical-align: middle;
    white-space: nowrap;
    height: auto !important;
}

$(document).scroll(function() { 
    if ($(document).scrollTop() > $('.top_header').outerHeight() ) 
 { 
 
      $(' .right_nav .reservations a:last-child').hide(300); 
    } else { 
      $(' .right_nav .reservations a:last-child').show(200); 
    } 
  });
header { 
  background-color: pink; 
  position: relative; 
} 
header .top_header { 
  text-transform: uppercase; 
  width: 100%; 
  position: fixed; 
  z-index: 2; 
  font-family: DINPro-Light, sans-serif; 
  font-size: 1.375em; 
  line-height: 60px; 
  color: #fff; 
  transition: all 0.4s ease; 
  margin: 0; 
} 
header .top_header .left_nav { 
  float: left; 
} 
header .top_header .left_nav .menu { 
  display: inline-block; 
  background-color: grey; 
  cursor: pointer; 
  margin-right: -6px; 
  max-width: 60px; 
  padding: 0 12px; 
} 
header .top_header .left_nav .menu img { 
  padding: 0 8px; 
  width: 55px; 
} 
header .top_header .left_nav .tel { 
  background-color: rgba(0, 0, 0, 0.5); 
  display: inline-block; 
  padding: 0 16px; 
} 
header .top_header .right_nav { 
  float: right; 
} 
header .top_header .right_nav .reservations { 
  display: inline-block; 
  background-color: #cba673; 
  padding: 0 15px; 
} 
header .top_header .right_nav .reservations img { 
  width: 27px; 
} 
header .top_header .right_nav .language { 
  margin-left: -6px; 
  width: 60px; 
  padding: 0 9px; 
  display: inline-block; 
  background-color: blue; 
} 
.reservations a { 
  vertical-align: middle; 
  white-space: nowrap; 
  height: auto !important; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
  <div class="top_header"> 
    <div class="left_nav"> 
      <div class="menu"> 
        ||| 
      </div> 
      <div class="tel"> 
        +38 097 060 05 57 
      </div> 
    </div> 
    <div class="right_nav"> 
      <div class="reservations"> 
        <a href="#">[|||]</a> 
        <a href="#">Забронировать</a> 
      </div> 
      <div class="language"> 
        Eng 
      </div> 
    </div> 
  </div> 
  <div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
  </div> 
</header>

Answer 2

Ваша проблема в том, что когда блок a уменьшается в размерах, то текст не влазит и поднимается вверх. Вам нужно указать для блока .reservations, что бы все элементы в нём всегда стояли в строчку и не вылазили. Для этого можно использовать flexbox. В вашем случае заменить display: inline-block на display: inline-flex:

$(document).scroll(function() { 
    if ($(document).scrollTop() > $('.top_header').outerHeight() && $(window).width() > 200 /* Настоящий размер: 768 */) { 
 
      $(' .right_nav .reservations a:last-child').hide(300); 
    } else { 
      $(' .right_nav .reservations a:last-child').show(200); 
    } 
  });
header { 
  background-color: pink; 
  position: relative; 
} 
header .top_header { 
  text-transform: uppercase; 
  width: 100%; 
  position: fixed; 
  z-index: 2; 
  font-family: DINPro-Light, sans-serif; 
  font-size: 1.375em; 
  line-height: 60px; 
  color: #fff; 
  transition: all 0.4s ease; 
  margin: 0; 
} 
header .top_header .left_nav { 
  float: left; 
} 
header .top_header .left_nav .menu { 
  display: inline-block; 
  background-color: grey; 
  cursor: pointer; 
  margin-right: -6px; 
  max-width: 60px; 
  padding: 0 12px; 
} 
header .top_header .left_nav .menu img { 
  padding: 0 8px; 
  width: 55px; 
} 
header .top_header .left_nav .tel { 
  background-color: rgba(0, 0, 0, 0.5); 
  display: inline-block; 
  padding: 0 16px; 
} 
header .top_header .right_nav { 
  float: right; 
} 
header .top_header .right_nav .reservations { 
  display: inline-flex; /* Эта строчка */ 
  background-color: #cba673; 
  padding: 0 15px; 
} 
header .top_header .right_nav .reservations img { 
  width: 27px; 
} 
header .top_header .right_nav .language { 
  margin-left: -6px; 
  width: 60px; 
  padding: 0 9px; 
  display: inline-block; 
  background-color: blue; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
  <div class="top_header"> 
    <div class="left_nav"> 
      <div class="menu"> 
        ||| 
      </div> 
      <div class="tel"> 
        +38 097 060 05 57 
      </div> 
    </div> 
    <div class="right_nav"> 
      <div class="reservations"> 
        <a href="#">[|||]</a> 
        <a href="#">Забронировать</a> 
      </div> 
      <div class="language"> 
        Eng 
      </div> 
    </div> 
  </div> 
  <div class="content"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique deserunt culpa earum, ducimus ab! Doloribus in similique, harum iusto suscipit vero, eos odio laudantium illo, ipsam saepe eius quod beatae.</p> 
  </div> 
</header>

P.S. Не используйте inline-*. Это не кроссбраузерное значение. Лучше самому указать ширину блока.

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте standart-s.com.ua
ТОП-10
READ ALSO
Gulp сборка в разные styl файлы
CSS

Gulp сборка в разные styl файлы

Сейчас есть конфигурация Gulp, в которой все скрипты пишутся в одинcss файл

 361
stylus import: выбрать кроме файлов с суффиксом
CSS

stylus import: выбрать кроме файлов с суффиксом

Естьstyl файл, который импортирует все другие файлы с определенных папок

 382
В code blocks работает, а в C++ builder нет [требует правки]
c++

В code blocks работает, а в C++ builder нет [требует правки]

Текст ошибки:

 338
DrvFR.dll как подключить данную библиотеку в программу на С++ и использовать метод Beep?
c++

DrvFR.dll как подключить данную библиотеку в программу на С++ и использовать метод Beep?

Как работать с драйвером устройства Штрих-М ФР(Фискальный регистратор), программно? Ни кто не сталкивался? Не понимаю как использовать данную...

 445