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

Question

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

该网站使用jQuery航点（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;}
}