###前提・実現したいこと
スクロール途中でCSSのタグ(.hakka)がソース上に出現して
CSSタグが強制的にフッターに表示される仕組みを用意しています。
###発生している問題・エラーメッセージ
最初の読み込み時にタグ(.hakka)が表示されてしまいます。 読み込んだ後、少しスクロールとタグが消えて再度 読み込むまでは正しい表記になります。 最初から途中スクロール時までタグを隠しておきたいです。 お分かりの方おりましたら是非ご教授頂きたいです。
###該当のソースコード
html
1<div class="search_box hakka" id="reservation"> 2 <div class="co_box"> 3コンテンツが入ります。 4 </div> 5</div>
CSS
1#reservation.hakka{ 2 position: fixed; 3 bottom: 0px; 4 left: 0px; 5 width: 100%; 6 z-index: 99; 7} 8 9.search_box{ 10 background: url(../img/search_bg.png) repeat; 11 width: 100%; 12 height: 100px; 13 float: left; 14} 15 16/* ウィンドウ幅が0~479pxの場合に適用するCSS */ 17@media screen and ( max-width:479px ){ 18 19#reservation.hakka{ 20 position: static; 21 bottom: 0px; 22 left: 0px; 23 width: 100%; 24} 25 26 27}/* ウィンドウ幅が0~479pxの場合に適用するCSS */ 28 29
javascript
1 2$(function(){ 3var reservation = $('#reservation') 4reservation_offset = reservation.offset(); 5reservation_height = reservation.height(); 6$(window).scroll(function () { 7if($(window).scrollTop() > reservation_offset.top + reservation_height) { 8reservation.addClass('hakka'); 9}else { 10reservation.removeClass('hakka'); 11} 12}); 13}); 14
回答1件
あなたの回答
tips
プレビュー