Q&A
htmlファイルとjqueryのフォルダ構成を載せてください。
前提・実現したいこと
●https://webdesignday.jp/inspiration/technique/css/4166/
●https://webdesignday.jp/samples/p4166/sample2/
上記のサンプル2を参考にヘッダーをデザインしたいと思っています。
発生している問題・エラーメッセージ
コピペでできるとのことだったのでやってみたのですが、
特定の位置に来てもtransformのクラスが追加されません。
該当のソースコード
JS
1 $(function) { 2 var _window = $(window), 3 _header = $('.site-header'), 4 heroBottom; 5 6_window.on('scroll',function(){ 7 heroBottom = $('.hero').height(); 8 if(_window.scrollTop() > heroBottom){ 9 _header.addClass('transform'); 10 } 11 else{ 12 _header.removeClass('transform'); 13 } 14}); 15 16_window.trigger('scroll');/ 17 }
CSS
1body{ 2 background: #81bcd8; 3} 4.site-header{ 5 background: rgba(255,255,255,0.5); 6 display: flex; 7 padding: 60px 20px; 8 position: fixed; 9 justify-content: space-between; 10 width: 100%; 11} 12.site-header.transform{ 13 background: rgba(255,255,255,0.9); 14 padding: 20px; 15} 16 17.site-logo img{ 18 height: 20px; 19 width: auto; 20} 21.gnav__menu{ 22 display: flex; 23} 24.gnav__menu__item{ 25 margin-left: 20px; 26} 27.gnav__menu__item a{ 28 color: #333; 29 text-decoration: none; 30} 31.hero{ 32 max-height: 500px; 33 overflow: hidden; 34} 35.hero img{ 36 height: auto; 37 width: 100%; 38} 39.content{ 40 line-height: 1.6; 41 margin: 0 auto; 42 padding-top: 100px; 43 width: 800px; 44} 45.content p{ 46 margin-bottom: 40px; 47} 48.site-footer{ 49 background: #333; 50 padding: 80px 0; 51} 52.copyright{ 53 color: #fff; 54 font-size: 12px; 55 text-align: center; 56}
HTML
1<body> 2 <header class="site-header"> 3 <h1 class="site-logo"><img src="logo.png" alt="WEBDESIGNDAY"></h1> 4 <nav class="gnav"> 5 <ul class="gnav__menu"> 6 <li class="gnav__menu__item"><a href="">About</a></li> 7 <li class="gnav__menu__item"><a href="">Works</a></li> 8 <li class="gnav__menu__item"><a href="">Recruit</a></li> 9 <li class="gnav__menu__item"><a href="">News</a></li> 10 <li class="gnav__menu__item"><a href="">Contact</a></li> 11 </ul> 12 </nav> 13 </header> 14 <div class="hero"><img src="hero.jpg" width="1600" height="1200" alt="hero"></div> 15 <div class="content"> 16 <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p> 17 <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p> 18 <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p> 19 </div> 20 <footer class="site-footer"> 21 <p class="copyright">@2017 WEBDESIGNDAY</p> 22 </footer> 23</body>
試したこと
jqueryの読み込ませ方が間違っているのかなと思い
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>をhead内で読み込ませたのですが違ったようです。
勉強中ですごく初歩的な質問でしたら申し訳ございません。
分かる方いらっしゃいましたらご教授いただきたいです。
よろしくお願いします。
回答1件
0
ベストアンサー
Javascriptの記載ミスでは？
正しいソース
Javascript
1var _window = $(window), 2 _header = $('.site-header'), 3 heroBottom; 4 5_window.on('scroll',function(){ 6 heroBottom = $('.hero').height(); 7 if(_window.scrollTop() > heroBottom){ 8 _header.addClass('transform'); 9 } 10 else{ 11 _header.removeClass('transform'); 12 } 13}); 14 15_window.trigger('scroll');
質問者さんのソース
javascript
1$(function) { 2 var _window = $(window), 3 _header = $('.site-header'), 4 heroBottom; 5 6_window.on('scroll',function(){ 7 heroBottom = $('.hero').height(); 8 if(_window.scrollTop() > heroBottom){ 9 _header.addClass('transform'); 10 } 11 else{ 12 _header.removeClass('transform'); 13 } 14}); 15 16_window.trigger('scroll');/ 17 }
最初の$(function) {と最後の}いらないです。
追記
なんかちょっとよくわからないので以下のソースを完全にコピペしてください。
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>TEST</title> 5 <link rel="stylesheet" href="//codepen.io/asuchi0819/pen/aeqjZw.css"> 6 </head> 7 <body> 8 <header class="site-header"> 9 <h1 class="site-logo"><img src="logo.png" alt="WEBDESIGNDAY"></h1> 10 <nav class="gnav"> 11 <ul class="gnav__menu"> 12 <li class="gnav__menu__item"><a href="">About</a></li> 13 <li class="gnav__menu__item"><a href="">Works</a></li> 14 <li class="gnav__menu__item"><a href="">Recruit</a></li> 15 <li class="gnav__menu__item"><a href="">News</a></li> 16 <li class="gnav__menu__item"><a href="">Contact</a></li> 17 </ul> 18 </nav> 19 </header> 20 <div class="hero"><img src="https://placehold.jp/1600x1200.png" width="1600" height="1200" alt="hero"></div> 21 <div class="content"> 22 <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p> 23 <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p> 24 <p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p> 25 </div> 26 <footer class="site-footer"> 27 <p class="copyright">@2017 WEBDESIGNDAY</p> 28 </footer> 29 <script src="//code.jquery.com/jquery-3.4.1.min.js"></script> 30 <script src="//codepen.io/asuchi0819/pen/aeqjZw.js"></script> 31 </body> 32</html>
多分これ？
もしかして、質問者さん
HTML
1<script src="//code.jquery.com/jquery-3.4.1.min.js"></script> 2<script> 3//省略 4</script>
を<head>の中に記述していませんか？
JavaScriptの場合、</body>の直前に記述しないと正しく動作しないものがあります。
投稿2019/08/07 08:02
編集2019/08/16 01:49
総合スコア10429
お返事ありがとうございます！
わかりやすいソースのご提示もありがとうございます！
ご提示いただいたソースは動作して見えたので
そのまま編集せずに貼り付けてたのですがなぜかjsが動作しないです、、、
こういう場合は環境が悪いのでしょうか、、、？
上のソースをきちんとコピペしましたか？
あと、よくある間違えでjQueryの読み込みより先に上のJavascriptのソースを読み込まないでください。
下のソースは質問者さんの間違ったソースですよ。
お返事ありがとうございます。
●https://codepen.io/asuchi0819/pen/aeqjZw
こちらのソースをコピペさせていただきました。
以下がコピペして読み込んだソースになります。
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script type="text/javascript">
var _window = $(window),
_header = $('.site-header'),
heroBottom;
_window.on('scroll',function(){
heroBottom = $('.hero').height();
if(_window.scrollTop() > heroBottom){
_header.addClass('transform');
}
else{
_header.removeClass('transform');
}
});
_window.trigger('scroll');
</script>
<style>
body{
background: #81bcd8;
}
.site-header{
background: rgba(255,255,255,0.5);
display: flex;
padding: 60px 20px;
position: fixed;
justify-content: space-between;
width: 100%;
}
.site-header.transform{
background: rgba(255,255,255,0.9);
padding: 20px;
}
.site-logo img{
height: 20px;
width: auto;
}
.gnav__menu{
display: flex;
}
.gnav__menu__item{
margin-left: 20px;
}
.gnav__menu__item a{
color: #333;
text-decoration: none;
}
.hero{
max-height: 500px;
overflow: hidden;
}
.hero img{
height: auto;
width: 100%;
}
.content{
line-height: 1.6;
margin: 0 auto;
padding-top: 100px;
width: 800px;
}
.content p{
margin-bottom: 40px;
}
.site-footer{
background: #333;
padding: 80px 0;
}
.copyright{
color: #fff;
font-size: 12px;
text-align: center;
}
.site-header{
background: rgba(255,255,255,0.5);
display: flex;
padding: 60px 20px;
position: fixed;
justify-content: space-between;
transition: .5s;
width: 100%;
}
.site-header.transform{
background: rgba(255,255,255,0.9);
padding: 20px;
}
</style>
</head>
<body>
<header class="site-header">
<h1 class="site-logo"><img src="logo.png" alt="WEBDESIGNDAY"></h1>
<nav class="gnav">
<ul class="gnav__menu">
<li class="gnav__menu__item"><a href="">About</a></li>
<li class="gnav__menu__item"><a href="">Works</a></li>
<li class="gnav__menu__item"><a href="">Recruit</a></li>
<li class="gnav__menu__item"><a href="">News</a></li>
<li class="gnav__menu__item"><a href="">Contact</a></li>
</ul>
</nav>
</header>
<div class="hero"><img src="https://placehold.jp/1600x1200.png" width="1600" height="1200" alt="hero"></div>
<div class="content">
<p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
<p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
<p>Lorem ipsum Enim do velit exercitation fugiat cillum labore et dolore ad minim dolor amet tempor nisi sunt Excepteur voluptate laborum et Duis labore cupidatat officia laboris minim cupidatat sit ad incididunt dolor in nulla elit sint do sit aliqua eu ut irure commodo exercitation dolore consequat est laborum Duis in dolore esse est dolore voluptate amet fugiat cupidatat Duis proident consequat nostrud Excepteur ea minim nisi eiusmod sed amet irure id ut officia occaecat nisi elit velit qui aliquip adipisicing consequat adipisicing aute laboris do consectetur sit officia elit in tempor aute eiusmod nulla dolore non sint in fugiat adipisicing amet quis in velit sit sunt Duis culpa deserunt Duis sed elit veniam exercitation Ut pariatur magna et id esse dolor dolore aliquip et in cillum commodo commodo et quis veniam magna irure laborum commodo enim tempor dolore velit ut adipisicing consequat dolore enim sunt eiusmod irure aliquip Duis magna laboris non in aliquip magna dolor dolore nulla nisi proident cupidatat laboris eu commodo adipisicing adipisicing ut aliquip eu aute veniam sint magna mollit nostrud ut sed consectetur et tempor consequat nisi nostrud dolore et officia adipisicing labore id enim nisi reprehenderit sunt fugiat ea Ut dolore sed eu in id velit esse et est labore eiusmod culpa adipisicing quis ea consectetur ea fugiat in culpa magna do laboris.</p>
</div>
<footer class="site-footer">
<p class="copyright">@2017 WEBDESIGNDAY</p>
</footer>
</body>
</html>
jQueryが読み込まれていないようですが？
失礼しました。
ですが<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>をhead内で読み込んでも動作しません。
文字化けを指摘しようと思いましたがどうやっても文字化けしますね。
> kana0701
asuchi0819さんの回答で問題なく動きそうですよ。
明示的にHTMLの中に <head>...</head> を追加しておきました。
https://codepen.io/Qanji/pen/wVXdbp
> asuchi0819さん
codepen上ソースコードForkさせていただきました。mm
k_fujimotoさん
コメントありがとうございます！
ですが私のPCだとそのままコピペしても使えないようです、、、
やはり動作環境？の問題なのでしょうか、、
> hibikikudoさん
teratail結構な確率で文字化けしますね...
> k_fujimotoさん
CodePenを触らない方にはわかりずらいところにjQueryの記述をしてしまいました。CodePenありがとうございます。Forkについてはお気になさらずに...
> kana0701さん
動作環境はどのようなものでしょうか
PCのスペック・ブラウザのバージョン等すべて教えてください。
また、Chromeでいう開発者ツールにエラーは出てないでしょうか？
コメントいただきました皆様。ご返信遅くなり申し訳ございませんでした。
今ちょっとテストしましたが、おそらくの原因を回答に追記しておきます。
遅くなり申し訳ありません。
head内に記述していたのが原因でした。
何度もありがとうございました！
あなたの回答
tips
プレビュー
