HTMLにてホームページを制作しております。
上にスクロールしたら「↓スクロール」という画像が表示され
下にスクロールしたら先ほどの「↓スクロール」という画像が「↑トップへ」に差し変わるものを実装しました。
background-imageで画像を表示させ
removeClassとaddClassで画像の入れ替えができました。
画像の入れ替えが終わったのでCSSのcontentで指定しようとしたところ
リンクの入れ替えで躓いてしまいこちらに質問しに参りました。
試したこと
リンクの入れ替えはCSSのcontentで指定&入れ替えをしようと考えておりましたが
contentでリンクを入れ替えることができませんでした。
実装したいこと
「↑トップへ」の画像が表示されているときのみリンクが追加され、ページ内スクロールで一番上にまで戻りたい
疑問点
①画像の差し替えはできたがリンクの入れ替えも一緒にやるとなると、今の方法では無理で別の方法になるのか?
②現在のコードで、どのように記述すればリンクも入れ替えることができますか?
今現在のコードを記述しておきます。
お分かりになられる方お見えでしたら、宜しくお願い致します。
HTML
1<div class="topimg_scroll hideClass_01"> 2 3</div>
js
1$(function(){ 2 var pos = 0; 3 var header = $('.topimg_scroll'); 4 var hideClass = 'hideClass'; 5 var hideClass_01 = 'hideClass_01'; 6 $(window).on('scroll', function(){ 7 if($(this).scrollTop() < pos ){ 8 //上スクロール時ヘッダーのhideClassを削除 9 header.removeClass(hideClass); 10 header.addClass(hideClass_01); 11 }else{ 12 //下スクロール時ヘッダーにhideClassを追加 13 header.removeClass(hideClass_01); 14 header.addClass(hideClass); 15 } 16 pos = $(this).scrollTop(); 17 }); 18});
css
1.topimg_scroll{ 2 transition: 0.5s; 3 height:175px; 4 width:28px; 5} 6.hideClass_01{ 7 background-image:url(../img/scroll_01.png); /* 「↓スクロール」画像 */ 8 background-repeat: no-repeat; 9} 10.hideClass{ 11 background-image:url(../img/scroll_02.png); /* 「↑トップへ」画像 */ 12 background-repeat: no-repeat; 13}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/07/16 01:34