position:fixed; で固定メニューにしたページをiPhoneで見ても同じように固定表示するため、横スクロールしてもメニューの位置が変わらない。（以下、対応の備忘録 ）
（↑こんな感じです）
このままだとスマフォでは見辛いので修正。
javascriptで対応する場合
javascript の navigator.userAgent でユーザエージェントを取得して、
条件式で iPhone、Android の場合に、
jQueryの removeClass で position:fixed; を記述したcss「box_fix」を削除。
条件式で iPhone、Android の場合に、
jQueryの removeClass で position:fixed; を記述したcss「box_fix」を削除。
$("#box").removeClass("box_fix");
PCの場合は、addClass で position:fixed; を記述したcss「box_fix」追加。
$("#box").addClass("box_fix");
cssで対応する場合
Media Queries で 640px 以下の場合、fixed を static に
#box { position:fixed; }
@media only screen and (max-width:640px) {
#box { position:static; }
}
こっちの場合、ウィンドウサイズで切替わります。
結果
（スマフォで見ると↑こんな感じになります）
掲載画像は、Firefoxの画面ですが、実機でも同じ動きになります。