Stop Menu scroll in certain resolution

Question

I have a drop down menu along with the scroll. I used Jquery to add css attributes to make this happen. I don’t want this to happen when the site is less than 768px wide. That’s when it stands still

Media queries didn’t help me solve because these attributes were added resolution independent. So I tried the following:

$(window).scroll(function() {
 if ($(window).width() < 760)
     {
        $('#menu').css({'position' : 'absolute'});
     }
 });

Or this

$(function() {
if ( $(window).width() < 760) {     
  $('#menu').css({'position' : 'relative'});
}
});

But it didn’t happen in both cases. I’m new to Jquery. How do I complement this code to work? I’m going the right way?

This is the code that makes my menu scroll

$(function() {
$(window).scroll(function()
{
var topo = $('#topo').height(); // altura do topo
var rodape = $('#rodape').height(); // altura do rodape
var scrollTop = $(window).scrollTop(); // qto foi rolado a barra
var tamPagina = $(document).height(); // altura da p?gina

if(scrollTop > topo){
  $('#menu').css({'position' : 'fixed', 'top' : '0'});
}else{
  $('#menu').css({'position' : 'relative', 'margin-top' : 0});
}
});
});

Answer 1

You must use the $(window).resize() to the jQuery detect that the screen has been resized

Example:

$(function() {
    $(window).resize(function(){
      if ( $(this).width() < 760) {     
        $('#menu').css({'position' : 'relative'});
      }
    }
});

Updating

After your update, I imagine that whatever you’re looking for something like this:

$(function() {
    $(window).scroll(function()
    {
        var topo = $('#topo').height(); // altura do topo
        var rodape = $('#rodape').height(); // altura do rodape
        var scrollTop = $(window).scrollTop(); // qto foi rolado a barra
        var tamPagina = $(document).height(); // altura da p?gina

        if($(window).width() > 760 && scrollTop > topo){
          $('#menu').css({'position' : 'fixed', 'top' : '0'});
        } else{
          $('#menu').css({'position' : 'relative', 'margin-top' : 0});
        }
    });
});

Because it must meet two conditions: The screen must be larger than 760px and must meet the desired condition when the $(window).scrollTop() is larger than the top size

Answer 2

Try this, because if you don’t want it to work if it’s less than 760, use the > in condition.

 $(window).scroll(function() {
     if ($(window).width() > 760)
         {
            $('#menu').css({'position' : 'absolute'});
         }
     });

Answer 3

It is better to manipulate classes rather than elements directly.
You can start this menu with a class responsible for keeping it fixed at the top and then use Javascript ^(Jquery) only to check whether or not this class should be removed depending on the width of $(window).

Already to handle resizing, use resize. Just check the width of the window and whether the widget has the class that keeps the menu fixed. Example:

// js

$(function(){   
    if($(window).width() < 768){
        $('.menu').removeClass('is-fixed');
    }
});

$(window).resize(function(){
   var menu = $('.menu');

   /*
    * Se for menor que a largura que você definiu e...
    * Se o elemento possuir a classe 'is-fixed', então...
    * ela é removida.
    * 
    * Do contrário a classe é inserida.
    */
   if($(window).width() < 768 && menu.hasClass('is-fixed')){
       menu.removeClass('is-fixed');
   } else {
       menu.addClass('is-fixed');
   }
});

DEMO

^{I had to put in Jsfiddle because Stackoverflow does not work resize.}