freekir
3/21/2016 - 11:36 AM

Заготовка: фиксированный хедер с плавным уменьшением

Заготовка: фиксированный хедер с плавным уменьшением

header.html
content_copyfile_download
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ActiveBox</title>
    <style>
        *{
          margin: 0;
          padding: 0;
        }
        #header {
          position: fixed;
          width: 100%;
          z-index: 999;
        }
        #header .header-content {
          border-bottom: 1px solid rgba(255, 255, 255, 0.15);
          width: 100%;
          padding: 40px 0;
          background: antiquewhite; 
          -webkit-transition: padding 1s ease-out, background 1s ease;
         -moz-transition: padding 1s ease-out, background 1s ease;
         -ms-transition: padding 1s ease-out, background 1s ease; /* IE10 is actually unprefixed */
         -o-transition: padding 1s ease-out, background 1s ease;
         transition: padding 1s ease-out, background 1s ease;

        }
        #header.fixed .header-content {
          border-bottom: 0;
          padding: 25px 0; 
          background-color: #292c47; 
        }
        .navigation {
          float: right; 
        }
        .navigation li {
          display: inline-block; 
        }
        .navigation a {
          color: #888;
          font-size: 13px;
          font-weight: 700;
          margin-left: 40px;
          text-transform: uppercase; 
        }
        .navigation a:hover, .navigation a.active {
          color: #333; 
        }
    </style>
</head>
<body style="height: 2000px;">
    <header id="header">
        <div class="header-content">
            <nav class="navigation">
                <ul>
                    <li><a href="#">Один</a></li>
                    <li><a href="#">Два</a></li>
                    <li><a href="#">Три</a></li>
                    <li><a href="#">Четыре</a></li>
                    <li><a href="#">Пять</a></li>
                </ul>
            </nav>
        </div><!-- header content -->
    </header><!-- header -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $(window).on('scroll', function() {
                var scroll = $(window).scrollTop();
                if (scroll >= 50) {
                    $('#header').addClass('fixed');
                } else {
                    $('#header').removeClass('fixed');
                }
            });    
        });
    </script>
</body>
</html>