Advanced Search

Show Banner on top after scroll begins

/ Published in: jQuery
Save to your folder(s)
Slides in a banner-header after some pixels of scrolling.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.