Posted By

mountbatt on 02/13/14


Tagged

header jquery banner top slide


Versions (?)

Show Banner on top after scroll begins


 / Published in: jQuery
 

Slides in a banner-header after some pixels of scrolling.

  1. <script>
  2. jQuery(window).scroll(function() {
  3. if (jQuery(this).scrollTop() > 260) {
  4. jQuery('#fixedHeader').stop().animate({ top: '0px' }, 50);
  5. } else {
  6. jQuery('#fixedHeader').stop().animate({ top: '-60px' }, 50);
  7. }
  8. });
  9.  
  10.  
  11. $( document ).ready(function() {
  12. $( "#fixedHeader a" ).click(function() {
  13. $("html, body").animate({ scrollTop: 0 }, "slow");
  14. return false;
  15. });
  16. });
  17.  
  18. </script>
  19.  
  20.  
  21. <style>
  22.  
  23. #fixedHeader {
  24. background-color: rgb(233,231,220);
  25. position:fixed;
  26. top:0;
  27. width:100%;
  28. z-index:100;
  29. top:-60px;
  30. color: #fff;
  31. opacity: 0.98;
  32. }
  33.  
  34. #fixedHeader .container {
  35. padding-top: 0px;
  36. line-height: normal;
  37. padding:3px 0px;
  38. background: transparent;
  39. }
  40. </style>
  41.  
  42.  
  43. <div id="fixedHeader">
  44. <div class="wrapper">
  45. <div class="container">
  46. YOUR TITLE HERE
  47. </div>
  48. </div>
  49. </div>

Report this snippet  

You need to login to post a comment.