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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

解決済

jqueryを使用してのスクロール時のheader固定について

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

2回答

1リアクション

0クリップ

314閲覧

投稿2022/08/31 15:02

前提

いつもお世話になっております。
今回お聞きしたいことは、スクロールした際headerを上部に固定する方法についてです。

php、css、jqueryを使用し、現在課題をこなしているのですが、画面をスクロールした際ヘッダーを固定することができずに悩んでいます。

実現したいこと

・jqueryでスクロールにて一定の箇所までスクロールしたらヘッダーが上部に固定され、上部のheader部に戻ると元に戻る。
→jqueryで対象のヘッダーのnav要素にスクロールをしたらclassが付与され、position: fixed;を記述し適応させる。上までスクロールするとclassが取り除かれ、ヘッダーが元の位置へ戻る。

このようなことがしたいのですが、上手くいきません。

該当のソースコード

php

<header> <nav id="menus"> <div id="menu_logos"> <a href="#" class="menu_logo"><img src="./img/logo.png"></a> </div> <div class="nav_list"> <a href="#" class="menu">はじめに</a> <a href="#" class="menu">体験</a> <a href="#" class="menu">お問合せ</a> </div> <div class="menu_sinin"> <a href="#" class="sinin_text">サインイン</a> </div> </nav> <div class="top_h1"> <hi class="menu_toptext"><b>あなたと<br>今日を生きる</b></h1> </div> </header>

css

header { background-image: url('./cafe/img/eyecatch.jpg'); filter: opacity(80%); width: 100%; background-size: cover; background-position: center; height: 550px; } #menus { display: flex; justify-content: space-between; margin: 0 auto; padding-top: 15px; width: 100%; align-items: center; flex-wrap: wrap; } #menu_logos { flex: 25%; display: flex; justify-content: space-between; } .menu_logo img { position: relative; top: 3px; left: 15%; margin: 0 auto; width: 85%; height: auto; filter: opacity(90%); } #menus a { color: rgba(255, 255, 255, 0.9); text-decoration: none; } .nav_list { flex: 50%; display: flex; flex-wrap: wrap; justify-content: center; } .nav_list a { padding: 0 1rem; } .menu_toptext { position: relative; width: 90%; top: 150px; left: 30px; font-size: 64px; color: rgba(255, 255, 255, 0.85); line-height: 85%; } .menu_sinin { position: relative; right: 5%; display: flex; flex: 25%; justify-content: flex-end; } .tennki { color: aqua; }

jquery

$(function () { var scroll_text = $(#menus).offset().top; $(window).scroll(function(){ if($(this).scrollTop() > scroll_text){ $("#menus").addClass('lord_menu'); } else { $("#menus").removeClass('lord_menu'); } }); });

試したこと

css内に以下のことを記述しましたが、適応されないようです。

#menus .lord_menu { position: fixed; top: 0; z-index: 10; width: 100%;

要素のcssに直接(lord_menu)のクラスを記述し、cssに記述すると色を変えたりすることが出来ますし、Googleの検証機能を使うとスクロールすることで確かにclassは付与されているようです。
1日記述を変えてみたり、そもそものjqueryを変えて見るなど、色々と考えましたが答えが出ずに1日終わってしまいました。
わかる方は教えていただきたいです。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

._.👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。