Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
29
Help us understand the problem. What is going on with this article?
@ztrehagem

スクロールすると画面上部に固定されるやつ

More than 5 years have passed since last update.

自分用備忘録でスンマセン。

なにこれ

固定したい要素はページの最上部には無く、スクロールして表示画面の上部に来たタイミングで固定されるやつ。

固定される要素:nav
それをラップする要素:div#nav
とする。

navposition: fixed;を適用した際に、navより下にある要素が上詰めされてしまう。
それを防ぐため、div#navnavの高さを保持する。

ソースはコアな部分しか書いてないです。

ケース1

固定する要素の高さがpx,rem等により指定される場合

HTML
<div id="nav">
    <nav>
        <ul><!--// 固定される要素の中身の例 //-->
            <li><a href="page1.html">page1</a></li>
            <li><a href="page2.html">page2</a></li>
            <li><a href="page3.html">page3</a></li>
        </ul>
    </nav>
</div>
CSS
#nav {
    position: relative;
    width: 100%;
    height: 3rem;
}

nav {
    position: absolute;
    width: 100%;
    height: 3rem;
}

nav.fix {
    position: fixed;
    top: 0;
    max-width: 100vw;
}
JavaScript(jQuery)
$(function(){
    $(window).on('load scroll', function(){
        if( $(this).scrollTop() > $('#nav').offset().top ) {
            $('nav').addClass('fix');
        }
        else {
            $('nav').removeClass('fix');
        }
    });
}

ケース2

固定する要素の高さをJSで取得する場合
(navの高さにremとpxが混在する場合、navの高さがその中の要素に依存して決まる場合など)

CSS
#nav {
    position: relative;
    width: 100%;
}

nav {
    position: absolute;
    width: 100%;
}
JavaScript
$(function(){
    $(window).on('load scroll', function(){
        if( $(this).scrollTop() > $('#nav').offset().top ) {
            $('nav').addClass('fix');
        }
        else {
            $('nav').removeClass('fix');
        }
    });

    $('#nav').height( $('nav').outerHeight(true) );
}

ケース3

固定する要素より上部にある要素の高さが、レスポシブデザイン等の理由でページ表示中に変化する場合

(ウィンドウのリサイズで上部の要素の高さが変わる場合は$(window).on()resizeを追加)

JavaScript
$(function(){
    $(window).on('load scroll resize', function(){
        if( $(this).scrollTop() > $('#nav').offset().top ) {
            $('nav').addClass('fix');
        }
        else {
            $('nav').removeClass('fix');
        }
    });
}

あとがき

$(window).on('scroll', function)中で何度もjQueryオブジェクトを作ってると目に見えてラグが出るんで、やっぱりjQueryオブジェクトは外側のvarに格納しておくべきかな。

29
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ztrehagem
新しい記事は note.ztrehagem.dev の方へ。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
29
Help us understand the problem. What is going on with this article?