Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement