Menu
I'm attempting to make the navigation bar stick to the top, when the user scrolls down to the nav bar and then unstick when the user scrolls back up past the navbar. I understand that this can only be implemented via JavaScript. I'm a beginner to JavaScript, so the easier the better. The JSFIDDLE is here.
The HTML is as follows:
<section class="main"> <div id="wrap"> <div id="featured"> <div class="wrap"> <div class="textwidget"> <div class="cup"><img src="#""></div> <div id="header"></div></div></div></div></div></div></div> <div class="whiteboard"> <h1><a href="#">HELLO GUYS</a></h1> </div> </div> <div class="bg1"> <h2> WE ARE AN EVENTS MANAGEMENT COMPANY BASED IN LONDON. </h2></div> The CSS is as follows:
.main{text-align:center;} h1{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; padding: 10px 10px; margin: 20px 20px; letter-spacing: 8px; text-transform: uppercase; font-size:3.125em; text-align: center; max-width: 606px; line-height: 1.45em; position: scroll; background-color:#e94f78; text-decoration: none; color:yellow; background-image:url; } h1 a{ text-decoration: none; color:yellow; padding-left: 0.15em; } h2{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; letter-spacing: 8px; margin-top: 100px; text-transform: uppercase; font-size:3.125em; text-align: center; line-height: 1.45em; position: scroll; text-decoration: none; color:white; z-index: -9999; } h2 a{ text-decoration: none; color:white; padding-left: 0.15em; } h5{ position: absolute; font-family:sans-serif; font-weight:bold; font-size:40px; text-align: center; float: right; background-color:#fff; margin-top: -80px; margin-left: 280px; } h5 a{ text-decoration: none; color:red; } h5 a:hover{ color:yellow; } #text1{ -webkit-font-smoothing: antialiased; display:inline-block; font: 800 1.313em "proxima-nova",sans-serif; margin: 20px 20px; letter-spacing: 8px; text-transform: uppercase; font-size:3.125em; text-align: center; max-width: 606px; line-height: 1.45em; position: scroll; background-color:#E94F78; } #text1 a{ color:yellow; text-decoration: none; padding-left: 0.15em; } #text1 a:hover{ text-decoration: none; cursor:pointer; } .whiteboard{ background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg); background-position: center; padding: ; background-color: #fff; z-index: 1000; } .bg{ height:2000px; background-color:#ff0; background-image:url(http://alwayscreative.net/images/stars-last.jpg); position:relative; z-index: -9999; } .bg1{ background-image:url(http://alwayscreative.net/images/stars-last.jpg); z-index: -9999; height:1000px; } /* Header */ #wrap { margin: 0 auto; padding: 0; width: 100%; } #featured { background: #E94F78 url(http://www.creativityfluid.com/wp-content/themes/creativityfluid/images/img-bubbles-red.png) no-repeat top; background-size: 385px 465px; color: #fff; height: 535px; overflow: hidden; position: relative; z-index: -2; } #featured .wrap { overflow: hidden; clear: both; padding: 70px 0 30px; position: fixed; z-index: -1; width: 100%; } #featured .wrap .widget { width: 80%; max-width: 1040px; margin: 0 auto; } #featured h1, #featured h3, #featured p { color: yellow; text-shadow: none; } #featured h4{ color:white; text-shadow:none; } #featured h4 { margin: 0 0 30px; } #featured h3 { font-family: 'proxima-nova-sc-osf', arial, serif; font-weight: 600; letter-spacing: 3px; } #featured h1 { margin: 0; } .textwidget{ padding: 0; } .cup{ margin-top:210px; z-index: 999999; } .container{font-size:14px; margin:0 auto; width:960px} .test_content{margin:10px 0;} .scroller_anchor{height:0px; margin:0; padding:0;background-image:url()} .scroller{background:#FFF; background-image:url(http://krystalrae.com/img/krystalrae-2012-fall-print-leopard-sketch.jpg); margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;} 
229
position:fixed; An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled. Show activity on this post. Now, it should not scroll with the rest of the page or the parent element.
To make an element sticky, do: make_sticky('#sticky-elem-id'); When the element becomes sticky, the code manages the position of the remaining content to keep it from jumping into the gap left by the sticky element. It also returns the sticky element to its original non-sticky position when scrolling back above it.
A pinned-down menu The interesting rule here is the ' position: fixed ', that makes the DIV stay fixed on the screen. The ' top: 50% ' and ' right: 0 ' determine where the DIV is displayed, in this case: 50% down from the top of the window, and a constant 0px from the right.
You can do that with some easy jQuery:
http://jsfiddle.net/jpXjH/6/
var elementPosition = $('#navigation').offset(); $(window).scroll(function(){ if($(window).scrollTop() > elementPosition.top){ $('#navigation').css('position','fixed').css('top','0'); } else { $('#navigation').css('position','static'); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
