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

Question

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

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

问题是，如果你把屏幕变窄，然后又变宽，“.stuck”类就会应用到菜单上，菜单就在标题的顶部，事情就搞砸了。

因此，当您更改屏幕宽度时，我需要以某种方式获取航点以删除“.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;}
}