jQuery Waypoints和响应式代码不能很好地播放

Question

我在这里有一个快速响应的网站： http://www.webershandwickseattle.com/

当您向下滚动时，该网站使用jQuery Waypoints（http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/）将导航菜单粘贴到屏幕顶部。

问题在于，如果你让你的屏幕非常狭窄，然后让它再次变宽，那么“.stuck”类将应用于菜单，菜单位于标题的顶部，事情变得紧张起来。

所以，当你改变屏幕的宽度时，我需要让Waypoints删除“.stuck”类。我怎么能这样做？

Answer 1

我遇到了同样的问题。

如果您将代码仅放置在CSS的媒体查询部分中，它将起作用。

这是一个例子，当宽度小于900px时，航点不会粘住，当它变大时：

/* Small */
@media (min-width:100px) and (max-width:900px) {
.stickyright {position:relative; width:300px;}
.stickyright.stuck {position:relative; width:300px;}
}

/* Large */
@media (min-width:901px) {
.stickyright {position:inline; width:320px;}
.stickyright.stuck {position:fixed; width:320px;}
}