【jQuery】ヒーローヘッダと固定グローバルナビを作る

こんにちは！セミマサです。

ウェブサイトを開いた際に画面いっぱいに表示される「ヒーローヘッダ」。うまく使えれば一気にユーザーを引きこむことができますよね！

今回はヒーローヘッダの作り方と、ヒーローヘッダの下に配置されたグローバルナビの固定の仕方についてまとめていきます。

デモサイト
HTML
CSS
jQuery
おわりに

デモサイト

下のボタンを押すとデモサイトへ移動します！

HTML

<header class="header">
    <div class="hero"></div>
    <h1 class="hero-txt">ヒーローヘッダと<br>固定ナビのデモ</h1>
</header>
<nav class="gnav head-nav">
    <div class="head-nav-box row">
        <p class="head-logo">固定ナビ</p>
        <ul class="head-nav-list row">
            <li><a href="#" class="head-nav-list-item">HOME</a></li>
            <li><a href="#" class="head-nav-list-item">ABOUT</a></li>
            <li><a href="#" class="head-nav-list-item">WORK</a></li>
            <li><a href="#" class="head-nav-list-item">CONTACT</a></li>
        </ul>
    </div>
</nav>
<section>
    <div class="content"></div>
</section>
<footer class="footer">
    <p class="copy-right">©今日もwebでセミが鳴く</p>
</footer>

<h1 class="hero-txt">ヒーローヘッダと<br>固定ナビのデモ</h1>

</header>

<li><a href="#" class="head-nav-list-item">ABOUT</a></li>

<li><a href="#" class="head-nav-list-item">CONTACT</a></li>

</ul>

</div>

</nav>

</section>

<p class="copy-right">©今日もwebでセミが鳴く</p>

</footer>

今回のHTMLです。

CSS

@charset "UTF-8";
html, body, div,
h1, p, img, ul, li,
footer, header,nav {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }
body {
  line-height: 1; }
footer, header,nav{
  display: block; }
nav ul {
  list-style: none; }
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }
.row {
  display: flex;
  flex-direction: row; }
.header {
  position: relative; }
.hero {
  height: 100vh;
  width: 100vw;
  background-image: url(../img/hero.jpg);
  background-size: cover;
  background-repeat: no-repeat; }
.hero-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 4rem;
  width: 80vw;
  line-height: 1.6;
  background-color: rgba(255, 255, 255, 0.1); }
.head-nav-box {
  justify-content: space-between;
  align-items: center;
  background-color: #e1a948; 
  padding: 0 4%;
}
.head-logo {
  width: 25%;
  text-align: center;
　color:white;
}
.head-nav-list {
  justify-content: space-around;
  align-items: center; 
  width: 75%;
}
.head-nav-list-item{
  text-decoration: none;
  color: white;
  display: block;
  padding: 12px;
  transition: all .3s; }
.head-nav-list-item:hover {
  background-color: rgba(255, 255, 255, 0.3); }
.gnav.fixed{
  position: sticky;
  top: 0;
  z-index: 9998; }
.content{
  width: 100vw;
  height: 200vh;
  background-color: antiquewhite;
}
footer {
  background-color: #52accc;
  width: 100%; }
.copy-right {
  text-align: center;
  padding: 20px 5%;
}
@media screen and (max-width: 768px) {
  .hero-txt {
    font-size: 3rem; }
 }
@media screen and (max-width: 480px) {
  .hero-txt {
    font-size: 2rem; }
  .head-logo{
    font-size: 0.8rem;
  }
  .head-nav-list-item {
    font-size: 0.8rem;
  }
}

@charset "UTF-8";

html, body, div,

h1, p, img, ul, li,

footer, header,nav {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent; }

body {

line-height: 1; }

footer, header,nav{

display: block; }

nav ul {

list-style: none; }

a {

margin: 0;

padding: 0;

font-size: 100%;

vertical-align: baseline;

background: transparent; }

.row {

display: flex;

flex-direction: row; }

.header {

position: relative; }

.hero {

height: 100vh;

width: 100vw;

background-image: url(../img/hero.jpg);

background-size: cover;

background-repeat: no-repeat; }

.hero-txt {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

text-align: center;

font-size: 4rem;

width: 80vw;

line-height: 1.6;

background-color: rgba(255, 255, 255, 0.1); }

.head-nav-box {

justify-content: space-between;

align-items: center;

background-color: #e1a948;

padding: 0 4%;

}

.head-logo {

width: 25%;

text-align: center;

　color:white;

}

.head-nav-list {

justify-content: space-around;

align-items: center;

width: 75%;

}

.head-nav-list-item{

text-decoration: none;

color: white;

display: block;

padding: 12px;

transition: all .3s; }

.head-nav-list-item:hover {

background-color: rgba(255, 255, 255, 0.3); }

.gnav.fixed{

position: sticky;

top: 0;

z-index: 9998; }

.content{

width: 100vw;

height: 200vh;

background-color: antiquewhite;

}

footer {

background-color: #52accc;

width: 100%; }

.copy-right {

text-align: center;

padding: 20px 5%;

}

@media screen and (max-width: 768px) {

.hero-txt {

font-size: 3rem; }

}

@media screen and (max-width: 480px) {

.hero-txt {

font-size: 2rem; }

.head-logo{

font-size: 0.8rem;

}

.head-nav-list-item {

font-size: 0.8rem;

}

今回のCSSになります。

・ヒーロヘッダは対象となる要素にwidth:100vw、height:100vhと指定すればOK。上記ソースでは「hero」クラスが該当します。

・今回はヒーローヘッダに背景画像を使用するので、background-imageプロパティで画像のURLを指定しています。CSSで相対パスの記述をする場合、CSSファイルからのパスを書く必要があります。間違えやすいので注意しましょう！

・background-sizeにcoverを指定すると領域を覆うように拡大・縮小されます。

・「.gnav.fixed」は後述するjQueryでの要素固定用の指定になります。

jQuery

今回のデモサイトのように「固定したい要素が途中にある」場合はjQueryでクラスを付与することで対応できます！

<script>
    $(function () {
        var _window = $(window);
        //固定したい要素
        var fixed_Element = $('.gnav');
        //固定したい要素が画面上部から何ピクセルなのかを取得
        var element_Top = fixed_Element.get(0).offsetTop;
        //ウィンドウがスクロールした際に実行
        _window.on('scroll', function () {
            if (_window.scrollTop() > element_Top) {
                fixed_Element.addClass('fixed');
            }
            else {
                fixed_Element.removeClass('fixed');
            }
        });
    });
</script>