Smooth scrolling effect for > Height (parallax effect)

Question

I'm looking for parallax effect. Like this scroll effect .

All I got is this

HTML

<nav class="menu">
    <ul>
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
        <li><a href="#">link3</a></li>
    </ul>
</nav>

jQuery

$(window).bind('scroll', function () {
        if ($(window).scrollTop() > 80) {
            $('.menu').addClass('fixed');
        } else {
            $('.menu').removeClass('fixed');
        }
    });

I want a more smooth effect, when I'm > 80px, like the scroll effect mentioned.

Answer 1

I have done a similar prototype using CSS Transitions and jQuery for a better smooth effect. Kindly check this out. CSS transitions are carried out by GPU, while jQuery transitions are made using CPU and mathematical calculations. So definitely it would look sluggish.

Also, I have used the same jQuery version (more or less) so that you don't need to mess up with the versions. :)

 $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 20) $(".scrolled").addClass("show"); else $(".scrolled").removeClass("show"); }); }); 

 * {margin: 0; padding: 0; list-style: none; line-height: 1;} body {font-family: 'Segoe UI';} header {line-height: 5; text-align: center; -webkit-transition: all 0.5s linear; -moz-transition: all 0.25s linear; -ms-transition: all 0.25s linear; -o-transition: all 0.25s linear; transition: all 0.25s linear;} header.scrolled {line-height: 3; border-bottom: 2px solid #ccc; background-color: #fff; height: 0; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; z-index: 999;} header.scrolled.show {height: 3em;} .first {background-color: #ccf; position: relative; top: 0; left: 0; right: 0; height: 100%; margin-bottom: 1300px; z-index: 1;} 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <header class="scrolled"> Scrolled Header </header> <div class="first"> <header class="normal"> Normal Header </header> </div>