質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

151閲覧

スクロール途中でCSSタグを表示させる仕組みについて

echo5

総合スコア11

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/28 03:29

編集2017/08/28 20:16

###前提・実現したいこと
スクロール途中で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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/08/28 04:02

htmlとcssもご提示願います。
echo5

2017/08/28 09:56

必要と思われるhtmlとcss箇所を抜粋しています。ご協力お願いします。
kei344

2017/08/28 11:06

質問文のコードはそれぞれ個別にコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
echo5

2017/08/28 20:17

使い方なれておらずすみません。質問文の手直しをしております。
guest

回答1

0

ベストアンサー

triggerするとか

JavaScript

1$(window).scroll(function () { 2// 略 3}).trigger('scroll');

.trigger()
http://api.jquery.com/trigger/

投稿2017/08/28 13:14

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問