|
|
| Line 31: |
Line 31: |
| | height: 100px; | | height: 100px; |
| | background-color: black; | | background-color: black; |
| − | margin-top: -6px; | + | top:16; |
| − | position: relative; | + | position: fixed; |
| | } | | } |
| | | | |
| Line 40: |
Line 40: |
| | width: 1200px; | | width: 1200px; |
| | margin: auto; | | margin: auto; |
| − | margin-top: 0; | + | margin-top: 116px; |
| | padding: 10px; | | padding: 10px; |
| | padding-left: 20px; | | padding-left: 20px; |
| | font-size: 15pt; | | font-size: 15pt; |
| − | }
| |
| − | .fixedMenu {
| |
| − | position:fixed!important;
| |
| − | top:16px;
| |
| − | z-index:999;
| |
| − | }
| |
| − | .shiftContent {
| |
| − | margin-top:116px!important;
| |
| | } | | } |
| | </style> | | </style> |
| − | <script>
| |
| − | // Calling the function
| |
| − | $(function() {
| |
| − | // get the top offset of the menu element var
| |
| − | menuTop = $("#menu").offset().top;
| |
| − | // trigger the function when the windows scroll
| |
| − | $(window).scroll(function() {
| |
| − | // get total scrolling
| |
| − | var htmlTop = $(window).scrollTop();
| |
| − | // check if the scrolling is less than top offset of menu
| |
| − | // then stick the menu on top by adding the stickyCssClass
| |
| − | // If not then set the menu at it's default position by removing the stickyCssClass
| |
| − | if (htmlTop > menuTop) {
| |
| − | // add the class to stick on top
| |
| − | $("#menu").addClass("fixedMenu");
| |
| − | $("#contentContainer").addClass("shiftContent");
| |
| − | } else {
| |
| − | // remove the stick on top class
| |
| − | $("#menu").removeClass("fixedMenu");
| |
| − | $("#contentContainer").removeClass("shiftContent");
| |
| − | }
| |
| − | });
| |
| − | });
| |
| | </script> | | </script> |
| | <div id="menu"> | | <div id="menu"> |