问题
I want my top menu to be fixed and scroll with the page, but only when it get to the top of the screen. Like here: http://en.miui.com/forum.php
anybody knows how?
tnx :)
回答1:
Either uses CSS' position:sticky with browser vendor prefixes or check the window's scrollTop when the element touches the top of the window and at the scrollTop or anything larger than it, fix the element with fixed positioning.
On scroll, when the scrollTop is less, give it relative positioning.
In jQuery:
$(window).on('scroll', function(){
// instead of 180 use the scrollTop when the element touches the top of the window
if($(window).scrollTop()>=180){
$(element).css('position', 'fixed');
}
else $(element).css('position', 'relative');
});
To check the number you want to use instead of 180, scroll to the point where the element touches the top, go into the developer console and type $(window).scrollTop() this should give you the number you are looking for.
回答2:
HTML
<div class="navbar">Scroll Nav</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus purus lectus. Aenean vel feugiat quam. Ut placerat, tortor tincidunt malesuada faucibus, dolor justo tincidunt tortor, at aliquam risus nisi ac lorem. Quisque eu turpis in arcu iaculis ultrices. Morbi at viverra nibh, at dapibus ante. Vivamus ut justo nec urna bibendum tempus ut posuere diam. Cras sem ligula, semper eu arcu quis, condimentum pharetra nisi. Suspendisse vestibulum quis nibh at dictum. Morbi arcu quam, sollicitudin a ullamcorper vitae, mattis in nibh. Fusce id nisl elementum leo convallis sodales. Nam eget gravida lacus.</p>
<p>In metus ex, tristique nec ex vel, facilisis venenatis eros. Aliquam tempus, quam bibendum accumsan laoreet, risus odio vulputate nunc, sed varius felis enim in arcu. Fusce gravida ipsum tellus, in tristique purus pulvinar id. Praesent vulputate lorem tortor, vel tincidunt arcu accumsan ac. Cras molestie sem sem, et rutrum turpis semper sit amet. Aenean augue purus, imperdiet eget tempus vitae, suscipit eu odio. Etiam luctus est sit amet sapien faucibus, vel imperdiet ipsum sodales. Mauris viverra ut odio ut congue. Praesent vitae varius nunc. Pellentesque eleifend est sem, et fermentum nisl sagittis quis. Curabitur fermentum tempor aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Quisque aliquet lobortis magna sed laoreet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque bibendum, neque eu ornare eleifend, dui ligula euismod ipsum, a suscipit orci risus at justo. Curabitur posuere ante et massa varius, eu lacinia mauris vestibulum. Aenean consectetur nibh at augue tempor, sit amet luctus purus vestibulum. Ut efficitur, neque eget posuere feugiat, nulla diam molestie nisl, quis aliquet ante elit ac eros. Proin tristique felis risus, eget molestie felis pretium ut. Ut at lacus efficitur, feugiat ligula sed, tincidunt erat. Nam congue lacus dignissim dui eleifend mattis id ut ex. Duis vel consectetur urna. Nam vestibulum convallis risus faucibus ultricies. Aenean lorem dolor, vulputate quis porta sit amet, lacinia vitae ante. Proin commodo finibus vehicula. Cras purus eros, consectetur id libero eu, eleifend fringilla sem. Suspendisse potenti. Suspendisse potenti.</p>
<p>Maecenas accumsan iaculis diam id auctor. In congue, lectus eu fringilla suscipit, lectus nibh egestas elit, ac egestas erat neque sed risus. Nam convallis sem velit, id ornare lectus rhoncus ut. Integer nulla velit, imperdiet ac quam non, facilisis malesuada arcu. Vivamus ornare at elit ornare eleifend. Pellentesque vitae felis nec orci congue ultricies. Cras luctus odio nunc, sed euismod lectus egestas viverra. Aliquam volutpat molestie massa. Aenean sodales malesuada interdum. Phasellus semper pulvinar justo, non interdum sem consectetur in. Ut imperdiet mauris in dui luctus, nec hendrerit tortor pharetra. In hac habitasse platea dictumst. Suspendisse hendrerit, felis eu interdum ultricies, dolor metus fermentum massa, vitae iaculis felis nunc ut magna. Aenean ut ultrices orci. Suspendisse lectus turpis, dictum elementum sollicitudin vel, feugiat at dui. Suspendisse ut cursus sem.</p>
<p>Phasellus lacinia hendrerit commodo. Fusce hendrerit, purus in porttitor semper, metus tortor mollis sem, nec suscipit velit orci sed velit. Donec at leo bibendum erat imperdiet lobortis. Nullam dignissim sem sit amet mollis malesuada. Phasellus eu augue ultricies, euismod erat tristique, vulputate magna. Donec malesuada justo justo, ut egestas purus volutpat sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum vitae rhoncus risus. Fusce mattis leo eros, ut tristique turpis ornare eu. Duis egestas euismod nulla eget iaculis. Aenean dictum, nunc facilisis egestas rhoncus, est dolor cursus libero, eget imperdiet metus nunc vel augue. Morbi purus augue, condimentum eu ullamcorper ac, cursus at neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Donec eu tempus nisl. Sed aliquam urna sit amet efficitur ullamcorper. Proin commodo neque id felis laoreet, id pulvinar ligula eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi convallis, ex sit amet ullamcorper faucibus, odio augue luctus urna, et fermentum tortor velit ac magna. Nullam viverra magna at nisl fermentum, ac vulputate sem pellentesque. Donec in quam lectus. In a enim ultrices, dictum libero nec, consequat augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin vulputate, tortor id faucibus semper, sapien felis vestibulum mauris, a eleifend enim massa id lacus. Mauris convallis enim vel cursus commodo.</p>
<p>Nunc dignissim tincidunt gravida. Ut pretium ex vel massa tincidunt, vel volutpat enim eleifend. Aenean dictum a mi in posuere. Quisque sit amet eros nunc. In finibus nisl in enim porta pharetra. Vivamus gravida vehicula lacus sed suscipit. Pellentesque elementum molestie lacus ut venenatis. Nunc efficitur gravida arcu, a blandit mi dictum ac. Mauris orci elit, luctus et metus ac, rutrum ullamcorper ipsum. Quisque quam felis, aliquam a pharetra id, efficitur sit amet elit. Aliquam volutpat luctus felis vitae vulputate.</p>
<p>Maecenas rutrum sodales ipsum tincidunt ultricies. Curabitur consectetur sodales sem vulputate mattis. Sed ac erat eros. Etiam suscipit arcu eleifend feugiat cursus. Maecenas ac facilisis tortor. Nullam nec facilisis nibh, sed fermentum elit. Sed vitae leo dui. Sed porta fringilla nibh nec vehicula. Nam et laoreet sapien, vel gravida leo.</p>
<p>Aenean eget semper nibh, eu suscipit mauris. Quisque venenatis ex ut consectetur porttitor. Integer at tortor semper, congue quam id, pellentesque erat. Quisque varius nunc enim, sed iaculis ipsum dictum ut. Nullam consectetur dapibus facilisis. Fusce faucibus, velit non lacinia interdum, nibh erat gravida sem, at tristique velit mauris a sem. Praesent a ipsum maximus, posuere diam eu, tincidunt velit. Proin sit amet turpis a augue consequat viverra eu iaculis metus. Nunc fringilla, lectus a lobortis volutpat, turpis turpis finibus nulla, sed placerat risus tellus vel massa. Cras ultrices porta tortor. Suspendisse tempus dui augue, non pretium nisl ornare a. Donec eu tempor sem. In pharetra sem sed sem ornare, in dictum turpis convallis. Curabitur rutrum lobortis urna, eu fermentum ex rhoncus vitae. Pellentesque ut imperdiet urna, et placerat ex. In a rhoncus augue.</p>
<p>Pellentesque ornare venenatis ante, vel pellentesque magna dictum nec. Integer gravida suscipit metus quis facilisis. Etiam non rhoncus nisl. In mi enim, laoreet id augue eu, pretium eleifend lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse fringilla, mi vitae convallis malesuada, orci mi pretium mi, sit amet bibendum nulla erat ac elit. Morbi dignissim consequat luctus. In ante libero, sollicitudin sit amet auctor vitae, laoreet ac erat. Phasellus scelerisque faucibus ex at blandit. Integer at turpis volutpat, vehicula eros quis, mattis urna. Vivamus a nulla iaculis, posuere purus eu, finibus dui.</p>
</div>
JS
var num = 50;
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.navbar').addClass('no-scroll');
} else {
$('.navbar').removeClass('no-scroll');
}
});
CSS
.navbar {
background:#000;
color:#fff;
height:60px;
padding:10px;
position:absolute;
top:0px;
width:100%;
z-index:100;
}
.no-scroll {
position:fixed;
top:0;
}
.content {
position:relative;
top:100px;
z-index:0;
}
SEE FIDDLE
回答3:
style normaly and add class or id for fixing to the top and style it.
now use jquery or javascript to get page Y offset and add fix class or id to the element..
$(document).ready(function(){
$(window).scroll(function(
if($(window).scrollTop() > 200px){
$('element').addClass('fixed');
}else{
$('element').removeClass('fixed');
}
));
})
来源：https://stackoverflow.com/questions/25475105/how-to-fixed-menu-only-when-it-get-to-the-top