JQuery経験3ヶ月の初心者です。
現在1枚ページのWEBサイトを作成しているのですが、5箇所のページ内リンクがあります。
JQueryにて、スクロール時に各リンクの場所に近づいたら、
ナビゲーションの各メニューの色を替えたり、
リンク先がフェードで表示される
などの機能を頑張って(頑張らないと出来ないレベルです。汗)つけました。
そして、ここからが質問なのですが、
JQueryにてナビゲーションバーのメニューにマウスを持って行くと、
hover()で英語と日本語に切り替えるようにしたのですが、
これをタブレットで見た時に、
hover()は意味が無くなることは当然ですが、
メニューをタップした時に、リンク先には移動するのですが、
何故かaddClass()でタップしたメニューと、その隣のメニューまでも色が替わってしまいます。
エージェントを分けてやればいいのではないか?と思ったのですが、
PHPの様にざっくりと「PC」「タブレット」「スマホ」のように判定するソースが見つけられませんでした。
そこで画面サイズで判定させてみたのですが、
結局セレクタでclassに対して直接指定しているせいか、
意味がありませんでした・・・
どのようにしたら上手くタブレットやスマホに対応させることが出来るのか、
レスポンシブに対するJQueryの使い方を踏まえご指導のほど宜しくお願いします。
因みに見られたら恥ずかしいコードを載せさせて頂きます。
lang
1//最初に表示されるリンクのメニューに色をつける。 2 var nav = $('#header'), 3 navTop = nav.offset(); 4 $('#nav a:nth-of-type(1)').addClass('navBg'); 5 6//ナビゲーションのhoverで文字切り替え 7 if ($(window).width() > 767) { 8console.log('test'); 9 $("#nav .ali01").hover(function(){ 10 $("#nav .ali01").html("ようこそ"); 11 },function(){ 12 if($(document).scrollTop() > 1010) { 13 $("#nav .ali01").html("HOME"); 14 } 15 }); 16 $("#nav .ali02").hover(function(){ 17 $("#nav .ali02").html("サイト"); 18 },function(){ 19 if($(document).scrollTop() < 1010 || $(document).scrollTop() >= 2100) { 20 $("#nav .ali02").html("SITE"); 21 } 22 }); 23 $("#nav .ali03").hover(function(){ 24 $("#nav .ali03").html("作品"); 25 },function(){ 26 if($(document).scrollTop() < 2100 || $(document).scrollTop() >= 3560) { 27 $("#nav .ali03").html("GALLERY"); 28 } 29 }); 30 $("#nav .ali04").hover(function(){ 31 $("#nav .ali04").html("私について"); 32 },function(){ 33 if($(document).scrollTop() < 3560 || $(document).scrollTop() >= 5000) { 34 $("#nav .ali04").html("ABOUT"); 35 } 36 }); 37 $("#nav .ali05").hover(function(){ 38 $("#nav .ali05").html("お問い合わせ"); 39 },function(){ 40 if($(document).scrollTop() < 5000) { 41 $("#nav .ali05").html("CONTACT"); 42 } 43 }); 44 45//スクロール時ヘッダーナビゲーション固定 46 $(window).scroll(function () { 47 var scrPoint = $(document).scrollTop(); 48 $('#scVal').val(scrPoint); 49 navTop.top; 50// console.log(navTop.top); 51 if($(window).scrollTop() > navTop.top) { 52 nav.addClass('fixed'); 53 } else { 54 nav.removeClass('fixed'); 55 } 56 57//最初に英語にしておく 58 $("#nav .ali01").html("HOME"); 59 $("#nav .ali02").html("SITE"); 60 $("#nav .ali03").html("GALLERY"); 61 $("#nav .ali04").html("ABOUT"); 62 $("#nav .ali05").html("CONTACT"); 63 64//ナビゲーションの色の切り替え 65 if(scrPoint <= 1010 ) { 66 $('#nav a:nth-of-type(1)').addClass('navBg').siblings().removeClass('navBg'); 67 $("#nav .ali01").html("ようこそ"); 68 } else 69 if(scrPoint > 1010 && scrPoint <= 2100) { 70 $('#nav a:nth-of-type(2)').addClass('navBg').siblings().removeClass('navBg'); 71 $("#nav .ali02").html("サイト"); 72 } else 73 if(scrPoint > 2100 && scrPoint <= 3560) { 74 $('#nav a:nth-of-type(3)').addClass('navBg').siblings().removeClass('navBg'); 75 $("#nav .ali03").html("作品"); 76 } else 77 if(scrPoint > 3560 && scrPoint <= 5000) { 78 $('#nav a:nth-of-type(4)').addClass('navBg').siblings().removeClass('navBg'); 79 $("#nav .ali04").html("私について"); 80 } else 81 if(scrPoint > 5000) { 82 $('#nav a:nth-of-type(5)').addClass('navBg').siblings().removeClass('navBg'); 83 $("#nav .ali05").html("お問い合わせ"); 84 } 85 }); 86 87 88//スクロール時のコンテンツ表示 89 var setElm = $('.scrEvent'), 90 delayHeight = 120; 91 setElm.css({display:'block',opacity:'0'}); 92 $('html,body').animate({scrollTop:0},1); 93 $(window).on('load scroll resize', function(){ 94 setElm.each(function(){ 95 var setThis = $(this), 96 elmTop =setThis.offset().top, 97 elmHeight =setThis.height(), 98 scrTop = $(window).scrollTop(), 99 winHeight = $(window).height(); 100 if (scrTop > elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight) { 101 setThis.stop().animate({opacity:'1'},500); 102 } else if (scrTop < elmTop - winHeight + delayHeight && scrTop < elmTop + elmHeight){ 103 setThis.stop().animate({opacity:'0'},500); 104 } 105 }); 106 }); 107} 108
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/03/24 07:13