当浏览器调整大小时隐藏粘滞导航

我为我的项目创建了粘滞导航，当我调整浏览器大小时，此粘滞导航必须仅在桌面上显示mininum 980px并隐藏在980px以下。当浏览器调整大小时隐藏粘滞导航

这里是我的代码

if ($(window).width() > 980) {  
$('.stickynav a').on('click', function(e) { 
e.preventDefault(); 
}); 
$(window).on('scroll',function() { 
    var scrolltop = $(this).scrollTop(); 

    if(scrolltop >= 132) { 
     $('.stickynav').fadeIn(250); 
    } 

    else if(scrolltop <= 210) { 
     $('.stickynav').fadeOut(250); 
    } 
}); 
}

我jsfiddle 创建我怎样才能解决这个问题？

来源

2013-12-12 sinzo

你可以在CSS中用媒体查询来做到这一点。

@media only screen and (max-width: 979px) { 
    .stickynav{ 
    display: none; 
    } 
}

我已经更新了你的提琴：http://jsfiddle.net/cXH5g/2/

媒体查询允许您定义的CSS为特定设备/屏幕尺寸。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

来源

2013-12-12 18:28:03 brian

喜布赖恩，感谢您的回答，但不起作用。当用户第一次打开页面时，粘性菜单应该隐藏，并且只有当用户滚动页面时才显示。这是你的代码全屏http://jsfiddle.net/cXH5g/2/embedded/result/ – sinzo

这样做的最好方法是使用CSS3媒体查询。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

但如果你想用jQuery做到这一点：

$(function(){ 

if ($(window).width() > 980) { 
    alert($(window).width()); 
    $('.stickynav').on('click', function(e) { 
     e.preventDefault(); 
    }); 

    $(window).scroll(function() { 
     var scrolltop = $(this).scrollTop(); 

     if(scrolltop >= 132) { 
      $('.stickynav').fadeIn(250); 
     } 

     else if(scrolltop <= 210) { 
      $('.stickynav').fadeOut(250); 
     } 
    }); 
} 
});

我把一个alert看的时候，你的代码应该工作。检查this fiddle

来源

2013-12-12 18:36:30

嗨，这是我的初始代码。该代码的问题在于，当您调整小于980像素的屏幕大小时，必须刷新页面，菜单将隐藏。你可以在全屏模式下检查你的代码 - http://jsfiddle.net/cXH5g/3/embedded/result/尝试滚动页面，然后调整浏览器的大小不超过980像素。谢谢 – sinzo

当浏览器调整大小时隐藏粘滞导航

回答

相关问题