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
0
Help us understand the problem. What is going on with this article?
@kke1229

指定した要素を固定する[position: sticky;]

概要

ヘッダーを固定したい場合、position:fixed;を使うとすぐ実装できますが、画面途中にある要素を固定したい場合はposition:sticky;が使うことで実装することができます。

こういうの↓
ダウンロード (1).gif

実装

<div class="wrapper">
    <div class="tab">
    <!--固定したい要素-->
    </div>
    <div class="pages">
    </div>   
</div>
<style>
    .tab{
        position: sticky; 
        top:0;  /*固定したい場所を指定*/
        z-index: 100; /*一番上に持ってくる*/
    }
</style>

親要素が自動的にコンテナとして定義される。
親要素内(今回だったらwrapper)でしかうまく作動しないので注意が必要。

まとめ

めんどくさそうだと思ったら簡単に実装ができました。

参考文献

position: sticky;の仕組みや実際の使い方をやさしく解説

0
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
kke1229

Comments

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