Domů › Trvalé zobrazení hlavní navigace pomocí jQuery a CSS

Trvalé zobrazení hlavní navigace pomocí jQuery a CSS

Ukázka Fixed menu on scroll (soubory ke stažení).

Zdroj:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
  <head>
    <meta charset="utf-8" />
    <title>Fixed menu on scroll</title>
    <meta name="description" content="How to make fixed menu on scroll with jQuery and CSS" />
    <meta name="keywords" content="fixed,menu,scroll" />
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
   
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/fixed-menu-on-scroll.js"></script>
   
    <link rel="stylesheet" type="text/css" href="css/style.css" />
  </head>
  <body>
   <div class="header">Brand</div>
   <div class="main-menu">
     <ul class="clearfix">
      <li><a href="#">Home</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">CSS</a></li>
     </ul>
    </div>
    <h1>Fixed menu on scroll</h1>
    <p>Make fixed menu on scroll with jQuery and CSS.</p>
  </body>
</html>

jQuery:

/**
* Fixed menu on scroll
*/
var jQuery = jQuery.noConflict();
jQuery("document").ready(function($){

var nav = $('.main-menu');

$(window).scroll(function () {
   if ($(this).scrollTop() > 110) {
     nav.addClass("fixed");
    } else {
     nav.removeClass("fixed");
    }
  });
});

CSS:

/**
* Fixed menu top on scroll
*/
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

 

PřílohaVelikost
fixed-menu-on-scroll.zip40.12 KB