Scroll

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
<style>

        html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
        header {
            position: fixed;
            top: 0;
            width: 100%;
            height: 80px;
            background: #fff;
        }
        nav {
            width: 960px;
            height: 80px;
            margin: 0 auto;
        }
        nav ul {
            margin: 20px 0 0;
        }
        nav ul li {
            display: inline-block;
            margin: 0 30px 0 0;
        }

        a { color: #4D4D4D;  font-family: sans-serif; text-transform: uppercase; text-decoration: none; line-height: 42px; }
        .active { color: #2dbccb; }

        .content { width: 100%; height: 100%; }
        .content > section { width: 100%; height: 100%; }

        #home { background: #2dbccb; }
        #about { background: #f6c362; }
        #services { background-color: #eb7e7f; }
        #contact { background-color: #415c71; }

.lw { font-size: 60px; }
</style>
</head>
<body>
<!-- Start your code here -->

<header>
        <nav>
            <ul>
                <li><a class="active" href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
              <li><a href="http://blog.eduweb.pl/">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
</header>
  <div class="content">
    <section id="home" style="height:400px">Section</section>
        <section id="about" style="height:400px">Section</section>
        <section id="services" style="height:400px">Section</section>
        <section id="contact" style="height:400px">Section</section>
</div>

<!-- End your code here -->
</body>
<script type="text/javascript">

    $(document).ready(function () {
        $(document).on("scroll", onScroll);

        $('a[href^="#"]').on('click', function (e) {
            e.preventDefault();
            $(document).off("scroll");

            $('a').each(function () {
                $(this).removeClass('active');
            })
            $(this).addClass('active');

            var target = this.hash;
            $target = $(target);
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top+2
            }, 500, 'swing', function () {
                window.location.hash = target;
                $(document).on("scroll", onScroll);
            });
        });
    });

    function onScroll(event){
        var scrollPosition = $(document).scrollTop();
        $('nav a[href^="#"]').each(function () {
            var currentLink = $(this);
            var refElement = $(currentLink.attr("href"));
            if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
                $('nav ul li a').removeClass("active");
                currentLink.addClass("active");
            }
            else{
                currentLink.removeClass("active");
            }
        });
    }

</script>
</html>