Q&A
直接の回答ではありませんが、無理にjQueryで実現するよりposition:stickyのcssを利用することを検討してみてはどうでしょうか？
前提・実現したいこと
メインビジュアルを過ぎたらヘッダーを固定したい
発生している問題・エラーメッセージ
メインビジュアルを過ぎてもヘッダー固定されない
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cresta_second</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Serif:ital,wght@0,400;0,700;1,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- header --> <header> <div class="header-inner"> <h1 class="headerInner-sitetitle"><a href="index.html">Cresta Design</a></h1> <nav class="headerInner-nav"> <ul class="nav-list"> <li class="nav-item"><a href="#">Service</a></li> <li class="nav-item"><a href="#">Concept</a></li> <li class="nav-item"><a href="#">Works</a></li> <li class="nav-item"><a href="./contact/">Contact</a></li> </ul> </nav> <!-- humburger --> <button class="burger-btn"> <span class="bar bar-top"></span> <span class="bar bar-mid"></span> <span class="bar bar-bottom"></span> </button> <!-- humburger --> </div><!--header-inner--> </header> <!-- header --> <!-- main --> <main> <!-- mv --> <div class="mv"> <div class="mv-copy"> <p class="mvCopy-en">Design for Smile.</p> <p class="mvCopy-ja">快適なオフィスを<br class="br-sp"> デザインする</p> </div> </div> <!-- mv --> コード
header{ border: 1px solid red; padding: 30px; width: 100%; position: absolute; top: 0; left: 0; z-index: 1; transition: 0.3s; } header.fixed{ position: fixed; background: #282f35; top: 0; left: 0; padding: 30px; width: 100%; transition: 0.3s; } .header-inner{ display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: auto; } header a{ color: #fff; transition: .3s; font-weight: bold; font-style: italic; } header a:hover{ opacity: .7; transition: .3s; } .headerInner-sitetitle{ font-size: 2.6rem; } .nav-list{ display: flex; } .nav-list>*+*{ margin-left: 30px; } .burger-btn{ display: none; } .br-sp{ display: none; } /* -------- */ /* mv */ /* -------- */ .mv{ height: 100vh; min-height: 550px; position: relative; background: url(../img/fv-bgi_01@2x.jpg) center/cover; } .mv-copy{ position: absolute; left: 120px; bottom: 177px; color: #fff; font-weight: bold; } .mvCopy-en{ font-size: 7rem; } .mvCopy-ja{ font-size: 4rem; margin-top: 30px; text-align: center; }
コード
$(function(){ var mvHeight = $('.mv').outerHeight(); $(window).on('load scroll',function(){ if($(this).scrollTop() > mvHeight ){ $('header').addClass('.fixed'); } else{ $('header').removeClass('.fixed'); } }); });/*jqery*/ コード
試したこと
検証画面を見ると、メインビジュアルを過ぎたところでfixedがついてはいるのですが画面では
固定されずスルーして行きます、、。
補足情報（FW/ツールのバージョンなど）
https://crestadesign.org/cording-second/
で解説があるのですが解決できずにいます、、。
はい。私も調べるうちになんだか素敵なCSSがあるみたいと思いました！ただｊQueryを使った課題がはじめてなので、何とか一つ完成させたいと思いまして。回答ありがとうございました☆今度ｓｔｉｃｋｙ使ってみます！
回答1件
0
ベストアンサー
このコードだと.fixedクラスが付与されています。.は要らないかなぁ。
jQuery
1 $('header').addClass('.fixed'); 2 } else{ 3 $('header').removeClass('.fixed');
以下蛇足です。
.を取って実行してみたところ動くようになったっぽいです。
投稿2021/03/15 23:50
編集2021/03/15 23:54
退会済みユーザー
総合スコア0
できました！ありがとうございます。この２日くらいずっと悩んでました、、。引数にはクラスのドットいらないんですね。急ぎざまに勉強してるので完全に抜けておりました、、。助かりました。
あなたの回答
tips
プレビュー
