Create a sticky header effect with .sticky()

.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.

  • Usage

    • How to use:

      Stick specific elements to top of the browser on scroll.
      You can also set a class on the element when the element is attached to the top of the browser by using the options available.

    • USAGE:

      bitsyCode.ready(function(){ // Check for document ready
          bitsyCode(".stick").sticky({ attachStyle:'.stuck' });
      })
  • Options

    • What options are there:
      attachStyle: "" (default value) // Specify a class to set to the element, once it's attached to the browser.
  • Returns

    • Returns: No return type

      This method does not need to return any type.

Share