enltr xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/terms/" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:og="http://ogp.me/ns#" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:sioc="http://rdfs.org/sioc/ns#" xmlns:sioct="http://rdfs.org/sioc/types#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:xsd="http://www.w3.org/2001/XMLSchema#"http://www.w3.org/1999/xhtml/vocab/////////////////Create a sticky header effect with .sticky() | BitsyCodehttps://www.bitsycode.com/methods/effects/stickyCreate a sticky header effect with .sticky() | BitsyCode Create a sticky header effect with .sticky() | BitsyCode html not-front not-logged-in no-sidebars page-node page-node- page-node-29 node-type-page

Create a sticky header effect with .sticky()

container

.sticky()


Description: Create a awesome sticky header effect by sticking elements to the top of the browser when scrolling.


Example:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>sticky demo</title>
      <script src="http://code.bitsycode.com/bitsycode-latest.min.js"></script>
      
      <style type="text/css">
          .stick {
              font-size:20px;
              font-weight: bold;
          }
          
          .stuck {
              margin:0;
              left:0;
              padding:10px;
              background-color:#FFF;
              border-bottom:3px solid #25649F;
              width:100%;
              text-align:center;
          }
          
      </style>
      
    </head>
    <body>
        
         <div class="row">
            <p class="stick">This Header will stick</p>
            <p><strong>This is random content to allow for demo of this method.</strong></p>
         </div>
        
         <script>
            
            (function(){
               
               bitsyCode.ready(function(){
                  bitsyCode(".stick").sticky({ attachStyle:'.stuck' });
               })
               
            })();
            
         </script>
     
    </body>
    </html>

Preview:

This Header will stick

This is random content to allow for demo of this method.

Share

Developed and built with passion and commitment.
Maintained by the bitsycode team.