javascript - How to keep the navbar fixed to top in big screens only using jquery -
basically want menu activate fixed class when when scroll down 150 pixels , width of screen bigger 850 pixels.
i used code menu still being fixed top in small screens(less 850px):
$(window).on('resize', function() { if ($(window).width() > 850) { var num = 150; // $('nav#site-navigation').addclass('fixed'); $(window).bind('scroll', function () { if ($(window).scrolltop() > num) { $('nav#site-navigation').addclass('fixed'); } else { $('nav#site-navigation').removeclass('fixed'); } }); } else{ $('nav#site-navigation').removeclass('fixed'); }
here css if needed:
.fixed { top: 0%; width: 100%; text-align: center; bottom: auto !important; z-index: 9999; position:fixed !important; }
how can put navbar fixed top when screen bigger 850?
you can add media query css class:
@media screen , (min-width: 850px){ .fixed { top: 0%; width: 100%; text-align: center; bottom: auto !important; z-index: 9999; position:fixed !important; } }
Comments
Post a Comment