SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sticky Header onscroll - like sitepoint "AwesomeBar" Ads

    I'd like to enable the sticky header effect that's being used on the sitepoint site here. I believe its on all pages, but just in case, hit this page and scroll and the bar will appear (its a teal blue ad bar for "New Relic").

    I like the way this bar appears after scroll. I'd like to achieve a similar effect with the gray header bar on my site here: http://learn.clickbump.com

    I've currently got it as a fixed header, however, once i have the code, I'd like to change that so that it flows and only becomes sticky after the scroll event.

    Any help much appreciated.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Scott,

    I have a simple (but basic) jquery example here.

    The animation is with css so is only available in modern browsers. You can change the delay and speed in the css.

  3. #3
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! Checking it out now.

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I got it working. Any ideas on how to make the transition a bit less abrupt? Perhaps fading through transparent to fully opaque?

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI Scott,

    You could just add a fadeIn() with jquery and change the delay on the css animation.
    e.g.
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin:0;
    	padding:0
    }
    /* sticky message at top of page */
    .header {
    	margin:0;
    	border-radius:0;
    	min-height:50px;
    	border-bottom:1px solid red;
    	background:rgb(242,222,222);
    	padding:1px;
    	text-align:center;
    	top:-100px;
    }
    .fixedElement {
    	position:fixed;
    	top:0;
    	right:0px;
    	left:0px;
    	z-index:999;
    	background:rgba(242,222,222, 0.9);
    	margin-bottom:0;
    	-webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);
    	-moz-box-shadow:    2px 3px 3px rgba(0, 0, 0, 0.25);
    	box-shadow:         2px 3px 3px rgba(0, 0, 0, 0.25);
    	-moz-transition:2s all 0s;
    	-webkit-transition:2s all 0s;
    	transition:2s all 0s;
    }
    </style>
    </head>
    
    <body>
    <div class="header fixit">
    		<h1>Testing sticky header</h1>
    </div>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <p>Some text to scroll</p>
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script type="text/javascript">
       function fixedHeaders() {
               var el = $(".fixit"),
                   offset = el.offset(),
                   elHeight = el.height(),
                   scrollTop = $(window).scrollTop()
                   if ((offset.top < scrollTop - el.height())) {
                       el.fadeOut( "slow", function() {
    		   el.addClass('fixedElement').fadeIn('slow');	
    																	});
                   }
               if (scrollTop === 0) {
                   el.removeClass('fixedElement');
               }
       }
    
       $(function () {
           $(window)
               .scroll(fixedHeaders)
               .trigger("scroll");
       });
    
    </script>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •