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

Question

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

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

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

因此，当您更改屏幕宽度时，不知何故我需要让航点删除“.stuck”类。我怎样才能做到这一点？

Answer 1

我有同样的问题。

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

这是一个示例，当宽度小于 900 像素时，路点不会粘住，当它更大时：

/* 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;}
}