jQuery safariでのscrollTopの挙動について

お世話になります。

ページ途中にあるメニューがスクロールで画面上部に来た際に、
固定のためのcssを付記するよう、jQueryでコードを書いているのですが、
safariのみ、ページ中ほどでcssが付記されてしまいます。
他のfirefoxやchromeでは正常に動作しています。

safari特有のエラーかと思うのですが、対処方法がありましたらご教授戴ければと思います。
何卒よろしくお願いいたします。

jQuery： version 1.10.1
safari： version 9.12

html
1<body>
2………省略………
3<div id="Menu">
4<ul>
5 <li>Menu-1</li>
6 <li>Menu-2</li>
7 <li>Menu-3</li>
8 <li>Menu-4</li>
9 <li>Menu-5</li>
10</ul>
11</div>
12………省略………
13</body>

jQuery
1<script>
2$(function() {
3 var Menu = $('#Menu');
4 // メニューのtop座標を取得する
5 var offsetTop = Menu.offset().top;
6 var floatMenu = function() {
7  // スクロール位置がメニューのtop座標を超えたら固定にする
8  if ($(window).scrollTop() > offsetTop) {
9   Menu.addClass('fixed');
10  } else {
11   Menu.removeClass('fixed');
12  }
13 }
14 $(window).scroll(floatMenu);
15 $('body').bind('touchmove', floatMenu);
16});
17</script>

行動規範の内容に同意します

回答3件

初めに

はじめまして、質問者さん

一つ、思い当たる解決策をお教えしますが、safari環境が無いため、
ドンピシャとはいかないかもです。

結論

JavaScript
1<script>
2 $(function() {
3  var Menu = $('#Menu');
4  var offsetTop = Menu.offset().top;
5  var floatMenu = function() {
6   if ($(window).scrollTop() > offsetTop) {
7    Menu.addClass('fixed');
8   } else {
9    Menu.removeClass('fixed');
10   }
11  };
12  //↓でイベントをまとめてみました。影響の少ない書き方と推奨されるイベントハンドリングが肝です。
13  $(window).add($('body')).on({
14   scroll: floatMenu,
15   resize: floatMenu,
16   touchmove: floatMenu
17  });
18 });
19</script>

こんな感じで如何でしょうか？

説明

$(window).add($('body')).on({
$.add()→$(window)と$('body')を合体させてます。
$.on()→イベントの付帯処理、引数で渡したイベントを発布してくれます。
{
scroll: floatMenu,
resize: floatMenu,
touchmove: floatMenu
}
→こちらで、複数種類のイベントを登録しています。
→1つだけのときは....
$.on('eventType', function(e){/処理/})

参考サイト

これでどうでしょうか？

safariということなので、処理の実行順番が違う可能性があります。
だめでしたら、駄目だったとお申し付けくださいな

投稿2016/08/26 07:59

tama_yn0815

総合スコア143

d-xanthus

2016/08/26 09:08

yuki_nishida様早速のご回答、ありがとうございます。テストしてみましたが、残念ながら、状況は改善されませんでした。私もいろいろ検索してみると、safariだとフラウザウインドウの高さ取得にクセがあるようです。また何かアイデアがありましたらお知らせください。よろしくお願いいたします。

行動規範の内容に同意します

自己解決

まずは、ご回答を戴きました方々に感謝致します。

今回は、とりあえず、CSSも調べてみた結果、固定したいメニューより以前に出現するimg画像に、height: auto; の指定があるため、safariが対象オブジェクトの高さをうまく認識できないためのもののようです。

CSSだけで対処できるか、致命的ではないのでこのままで進めるかはこれから考えますが、
とりあえず、質問としては、こちらで終了とさせていただきます。

ありがとうございました。

投稿2016/08/29 01:09

d-xanthus

総合スコア56

safari の scrollTop は変わった挙動をするようです。今手元に safari が無いため試していませんが、下記のようにして解決したと言う記事を見つけました。

【javascript - $(window).scrollTop() is not working in safari - Stack Overflow】
http://stackoverflow.com/questions/25075117/window-scrolltop-is-not-working-in-safari

try
var scrollPos = $("body").scrollTop();
webkit browsers always render window/html scrollTop as zero.

【jquery - scrollTop not working in Safari - Stack Overflow】
http://stackoverflow.com/questions/26242982/scrolltop-not-working-in-safari

JavaScript
1$(window).scroll(function()
2{
3    var s = $('html').scrollTop() || $('body').scrollTop();
4    console.log(s);
5});

こっちは別の方法でスクロールに対処しているようです。

【ScrollTo bug in 1.8.2 in Safari 6.0.2 & Mountain Lion - GSAP - GreenSock】
http://greensock.com/forums/topic/7205-scrollto-bug-in-182-in-safari-602-mountain-lion/?p=35063

投稿2016/08/27 13:55

kei344

総合スコア69398

d-xanthus

2016/08/29 01:03

Kei344様ご回答戴き、ありがとうございます。こちらも残念ながら思うような動きにならなかったので CSSを含めていろいろテストしてみた結果、どうも固定したいメニューより以前に出現するimg画像に、height: auto; の指定があるため、safariがオブジェクトの高さをうまく認識できないようでした。レスポンシブサイトのため、cssでの対処を考えないといけないのですが、とりあえず、どちらを優先させるかは、これからクライアントと相談します。（とりあえず、safariだけの挙動のようですから…）ありがとうございました。

行動規範の内容に同意します

あなたの回答