ここから本文です

サイト作成についての質問です。 フッターをfixedで固定してバナーみたいなことに...

ryo********さん

2019/5/715:01:49

サイト作成についての質問です。
フッターをfixedで固定してバナーみたいなことにすることは出来たのですが、指定場所からバナー表示させることが出来ません。

例えば、高さ1000pxのサイト

があれば、読み進めていって高さ700pxに到達した時にバナーを表示させるというものです。

※フェードインやフェードアウトなどの細かいアニメーションはいりません。
ただ、到達した時に表示させる、させないの分岐がほしいです。

javascriptとHTMLとcssは一応知識があります。

この3つの言語を併用して作れないでしょうか。よろしくお願いします。

この質問は、活躍中のチエリアン・専門家に回答をリクエストしました。

閲覧数:
23
回答数:
1
お礼:
250枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

2019/5/716:11:42

スクロールイベントが発生したときに、
スクロール量によって <footer> の「display」を切替えるだけだと思う。
ただ、
画面サイズが 700px 以下ということは滅多にないから、
ページの高さが 1000px だと 300px 以上スクロールするのは無理。
だから、
700px スクロールした時点で表示、としていたら、
<footer> は永遠に表示されない。

だから、
とりあえずここでは、
<footer> を除くコンテンツの高さを 3000px くらいにしておいて、
スクロール位置が 700px に達したら <footer> を表示、
という感じにすると↓こんな感じになる。

────────────────
<main><div style="
width: 100px;
height: 3000px;
border: dotted 4px #666;
"></div></main>
<footer>フッター</footer>

<style>
footer {
display: none;
position: fixed; left: 0px; bottom: 0px;
box-sizing: border-box;
width: 100%;
height: 60px;
padding: 10px 20px;
margin: 0px;
border: solid 2px #666;
background: #fff;
}
</style>

<script>
window.addEventListener( "scroll", function(){
document.querySelector( "footer" ).style.display = ( window.pageYOffset<700 ) ? "none" : "block" ;
}, false );
</script>
────────────────

  • ois********さん

    2019/5/716:31:56

    もし、
    「スクロール位置が 700px に達したら」
    ということではなく
    「700px の位置が画面内に入ったら」
    という条件で表示したいなら、
    「画面のスクロール量+画面高さ」が 700px 以上
    という条件で表示を切替えればいい。

    ────────────────
    function swFooter(){
    document.querySelector( "footer" ).style.display
    = ( window.pageYOffset+window.innerHeight<700 ) ? "none" : "block" ;
    }
    window.addEventListener( "DOMContentLoaded", swFooter, false );
    window.addEventListener( "scroll", swFooter, false );
    ────────────────

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2019/5/8 13:52:37

ありがとう御座います。どうしてもJavaScriptを学習していると、HTMLを絡めた学習サイトなどが出てこず、四苦八苦していました。

大変参考になりました。ありがとう御座いました。

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる