Показать сообщение отдельно
  #2 (permalink)  
Старый 22.05.2015, 02:09
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      border: 0;
    }

    body {
      font-size: 25px;
      color: #fff;
      font-family: 'Microsoft Sans Serif';
    }

    #header {
      height: 1000px;
      background-color: gray;
    }

    #nav {
      height: 40px;
      background-color: red;
      text-align: center;


    }

    #text {
      background-color: #CCC;
      height: 2000px;
    }

    .sticky {
      position: fixed;
      width: 100%;
      top: 0;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <header>
      <div id="header">
      </div>
    </header>
    <nav>
      <div id="nav">
        <div id="logo_nav"></div>
        <div id="tel_nav"><p>Телефон</p></div>
      </div>
    </nav>
    <div id="text">
    </div>
  </div>
  <script>
    var nav = $("#nav"),
        header = $('header').height();

    $(window).scroll(function() {
      if( $(this).scrollTop() > header ) {
        nav.addClass('sticky');
      } else {
        nav.removeClass('sticky');
      }
    });
  </script>
</body>
</html>

Последний раз редактировалось Decode, 22.05.2015 в 02:12.
Ответить с цитированием