jQuery调整大小和滚动

我正在使用jQuery在我正在处理的单页面上创建一些效果。我有两个单独的导航栏。一个绝对（#initial）位于页面顶部，另一个固定（#fixed_nav）到屏幕顶部。根据屏幕宽度，固定的有两种不同的样式。jQuery调整大小和滚动

我想要做的是在用户向下滚动到#initial之后，#fixed_nav向下滑动到视图中，然后粘住，直到您再次滚动并可以再次看到#initial。当窗口被调整大小时，我也希望它作出响应切换，因为这可能不常见。我个人可以让他们都能工作，但我尝试了几种不同的方式来让他们一起工作，而我只得到一个或另一个。我希望有人能够用这个指向我的正确方向。这就是我现在所拥有的对脚本的一部分：

//Nav Switcher 
    if ($(window).width >= 940) { 
     $(document).scroll(function() { 
      if ($(window).scrollTop() >= 60) { 
       $('#fixed_nav').slideDown(); 
      } else { 
       $('#fixed_nav').slideUp(); 
      } 
     }); 
    } 
    //Responsive 
    $(document).resize(function() { 
     if ($(window).width() < 940) { 
      $('#fixed_nav').show(); 
      $('#initial').hide(); 
     } 
    });

响应部分工作，但我不再获得#fixed_nav滑下的宽度或940+。

来源

2015-01-13 Mark Little

首先，不是使用javascript来执行响应式任务，而是使用css3媒体查询，性能结果会好很多。

/* CSS */ 
@media only screen and (max-width: 939px) { 
    #initial {display:none} 
} 
@media only screen and (min-width: 940px) { 
    #fixed_nav {display:none} 
}

其次，注意你是结合调整大小的处理函数只有在窗口宽度是最初> = 940你想什么做的是反正绑定功能，然后让它运行只有在该条件成立的情况下：

// Javascript 
$(document).scroll(function() { 
     if ($(window).width >= 940) { 
      if ($(window).scrollTop() >= 60) { 
       $('#fixed_nav').slideDown(); 
      } else { 
       $('#fixed_nav').slideUp(); 
      } 
     } 
});

来源

2015-01-13 09:35:25 AvivC

谢谢！这工作很好。现在我有另一个奇怪的问题。我拿出了jQuery的重新调整大小，我正在使用媒体查询。然而，如果由于某种原因有人要调整窗口的大小（例如，如果它们开始<940px并且最大化了窗口），则每个链接的偏移保持原样。如果你调整大小并刷新它的作品完美。 –

jQuery调整大小和滚动

回答

相关问题