jquery - jQuery ウェイポイントとレスポンシブ コードがうまく動作しない

Question

ここにレスポンシブ サイトがあります: http://www.webershandwickseattle.com/

このサイトでは jQuery ウェイポイント ( 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;}
}