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

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -