###前提・実現したいこと
現在、webサイトを製作しています。
レスポンシブサイトです。
実現したいことは、
jqueryを使用して、一定量のスクロールがあったら、
クラスを付け替えてヘッダーをfixedにする、というものです。
①スクリプト $(window).on('scroll',function() { var h = $('.eye_catch').innerHeight();//高さを取得(h) if ($(this).scrollTop() > h){ //hまできたらアクション $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } });
困っている部分は、iosでのスクロールイベント発火のタイミングです。
iphoneでタッチして、スクロールし、指が離れたタイミングでイベントが発生してしまいます。
iosは指が離れたタイミングでスクロールイベントが発生するとのことで、
②のようにtouchmoveを導入して、ログを取ったところ、touchmove自体はコンソールに出力されます。
②touchmoveのログ出し $(window).on('scroll touchnmove',function(){ console.log('動いたよ!');
これでクラスの切り替わりは狙った位置で起きるのようになったのですが、
実際の表示の切り替わりは指を離したタイミングで起きます。
何かヒントをいただければ幸いです。
ーーーー追記ーーーーーー
スクリプト全体は以下の通りです。
<script> var $win = $(window); $win.scroll(function() { var h = $('.eye_catch').innerHeight();//高さを取得(h) if ($(this).scrollTop() > h){ //hまできたらアクション $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } if('ontouchstart' in window) { this.$win.bind('touchmove', function () { var h = $('.eye_catch').innerHeight();//高さを取得(h) if ($(this).scrollTop() > h){ //hまできたらアクション $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } }); } }); </script>
こちらのパターンも試してみました。
$(function(){ var $header = $('.header'); var h = $('.eye_catch').innerHeight(); var $wrap = $('#wrap'); var $offsetTop = $header.offset().top; var $fixedMenu = function(){ if($(window).scrollTop()>$offsetTop){ $header.css({ 'position':'fixed', 'top':'0', 'z-index':'999' }); $wrap.css({ 'padding-top':'55px' }); }else{ $header.css({ 'position':'', 'top':'', 'z-index':'' }) $wrap.css({ 'padding-top':'' }); } } $(window).scroll($fixedMenu); jQuery('body').bind('touchmove',$fixedMenu); }); </script> コード
回答1件
あなたの回答
tips
プレビュー