Шаблон с верхним меню, у каждого элемента меню картинка. При скролле меню становится фиксированным и картинки элементов меню сворачиваются. Top menu with img, on scroll top menu is fixed and img roll up.

index.html

<header>
    <div class="header__top"></div>
    <nav class="header__nav">
        <ul>
            <li>
                <a href="#">
                    <img src="http://cs623231.vk.me/v623231145/2714a/lGNVYr8gp7k.jpg" class="header__nav__img">Главная
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://cs623231.vk.me/v623231145/2714a/lGNVYr8gp7k.jpg" class="header__nav__img">Вторая
                </a>
            </li>
        </ul>
    </nav>
</header>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias incidunt est, vero accusamus, fuga ut tempora nesciunt eius impedit deleniti assumenda, ullam quisquam nemo? Enim, error non? Quis, provident, dicta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias incidunt est, vero accusamus, fuga ut tempora nesciunt eius impedit deleniti assumenda, ullam quisquam nemo? Enim, error non? Quis, provident, dicta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias incidunt est, vero accusamus, fuga ut tempora nesciunt eius impedit deleniti assumenda, ullam quisquam nemo? Enim, error non? Quis, provident, dicta.Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Alias incidunt est, vero accusamus, fuga ut tempora nesciunt eius impedit deleniti assumenda, ullam quisquam nemo? Enim, error non? Quis, provident, dicta.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias incidunt
        est, vero accusamus, fuga ut tempora nesciunt eius impedit deleniti assumenda, ullam quisquam nemo? Enim, error non? Quis, provident, dicta.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias incidunt est, vero accusamus, fuga ut tempora nesciunt eius impedit deleniti assumenda, ullam quisquam nemo? Enim, error non? Quis, provident, dicta.Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Alias incidunt est, vero accusamus, fuga ut tempora nesciunt eius impedit deleniti assumenda, ullam quisquam nemo? Enim, error non? Quis, provident, dicta.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias incidunt
        est, vero accusamus, fuga ut tempora nesciunt eius impedit deleniti assumenda, ullam quisquam nemo? Enim, error non? Quis, provident, dicta.</p>
</div>

script.js

$(document).ready(function() {
    var $headerNav = $('.header__nav'),
        $headerNavImg = $headerNav.find('.header__nav__img'),
        $content = $('.content'),
        headerNavTopPosition = $headerNav.offset().top;

    $(window).on('scroll', function() {

        if ($(window).scrollTop() > headerNavTopPosition) {
            $headerNav.addClass('header__nav-is_fixed');
            $content.addClass('content-top_margin');
            $headerNavImg.addClass('header__nav__img-hidden');
            setTimeout(function() {
                $headerNav.addClass('animate-children');
                $('#cd-logo').addClass('slide-in');
                $('.cd-btn').addClass('slide-in');
            }, 50);
        } else {
            $headerNav.removeClass('header__nav-is_fixed');
            $content.removeClass('content-top_margin');
            $headerNavImg.removeClass('header__nav__img-hidden');
            setTimeout(function() {
                $headerNav.removeClass('animate-children');
                $('#cd-logo').removeClass('slide-in');
                $('.cd-btn').removeClass('slide-in');
            }, 50);
        }
    });
});

style.css

* {
    margin: 0;
    padding: 0;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.header__top {
    height: 300px;
    background: green;
}
.header__nav {
    height: 100px;
    overflow: hidden;
    background: #ccc;
    transition: height .5s ease;
}
    .header__nav-is_fixed {
        position: fixed;
        width: 100%;
        height: 50px;
        top: 0;
        left: 0;
    }
    .header__nav li {
        float: left;
        margin: 0 10px;
        list-style: none;
        text-align: center;
    }
    .header__nav__img {
        display: block;
        margin: 10px;
        width: 50px;
        height: 50px;
        -webkit-transition: height .5s ease;
        -moz-transition: height .5s ease;
        -ms-transition: height .5s ease;
        -o-transition: height .5s ease;
        transition: height .5s ease;
    }
        .header__nav__img-hidden {
            height: 0;
        }
.content {
    /*transition: margin 0.5s;*/
}
    .content-top_margin {
        margin-top: 100px;
    }