高さが可変するヘッダー分、指定の要素を下げたい

Question

こんにちは。

高さが可変するヘッダー分、指定の要素を下げたいのですが、いいやり方がわからないので質問させてください。

やりたいこと

• ヘッダーを固定し、その高さ分、bodyを下げたい

課題

• ヘッダーの高さが固定であれば、bodyにmargin-topで解決するが、ページによってはタブ（アンカーリンク）が存在しない場合もある。
• 現状、tabItemsの数で条件分岐し、margin-topをpxで当てているが、ヘッダーの高さを取得し、その分下げたい。

試したこと

• ヘッダーに(ref="header)を当て、this.$refs.header.getBoundingClientRect().heightで取得しようと思ったがthis.$refs.headerがundifinedになった

####追記
調べてみたところrefsの取得はmounted以降でないとできないようですね。mountedで取得した高さ分、bodyを下げることはできますでしょうか？

####ソースコード

<template lang="pug">
    div
        div.header　//ここの高さが可変する
           Tab(:items="tabItems" style="padding-top: 16px;")

        div.body(:style="AdjustingPositionBody()")
           div.body1(id="1")

           div.body1(id="2")

           div.body1(id="3")


</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Tab from '@/components/tabs/Tab.vue';

@Component({
    components: {Tab},
})
export default class Sample extends Vue {
    private tabItems = [
        {title:'item1', id:'1'},
        {title:'item2', id:'2'},
        {title:'item2', id:'3'},
    ]

    private onScroll (id: string) {
        document.getElementById(id).scrollIntoView({ behavior: 'smooth'})
    }

    private AdjustingPositionBody() { //無理やり感があるので変えたい
        if(this.tabItems.length <= 3) {
            return {
                marginTop: "50px"
            }
        } else if(this.tabItems.length >= 4) {
            return {
                marginTop: "80px"
            }
        }
    }
}
</script>
<style scoped>

.header {
    z-index: 999;
    position: fixed;
    width: 100%;
}
</style>

####タブのコンポーネント

<template lang="pug">
    div.tabs
        li(
            v-for="(item, index) in items"
            @click="onScroll(item.id)"
        ).tab {{item.title}}
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
    components: {}
})
export default class Tab extends Vue {
    @Prop() items: string[] | undefined;

    private onScroll (id: string) {
        document.getElementById(id).scrollIntoView({ behavior: 'smooth'})
    }

}
</script>

<style scoped>
.tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    grid-gap: 8px;
    margin: 0;
    border-bottom: 1px solid #afafaf;
    background-color: #fff;
}

.tab {
    padding: 0 8px;
    padding-bottom: 4px;
    color: rgb(81, 38, 0);;
    margin-bottom: -1px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
}
</style>

Comments

[Lhankor_Mhy]

sticky ではダメそうでしたか？

[NakaShun_1129]

コメントありがとうございます！
stickyを試したところヘッダーの高さ分下げることができました！
こんなシンプルな方法があったんですね、、教えていただいたきありがとうございます！

一点だけうまくいかない点があり、
スクロール時にヘッダーが固定されずに一緒にスクロールされてしまいます。
top: 0 も指定しているので原因がわかりません。

もし、何かご存知でしたら教えていただきたいです。

Answer 1

stickyを使ってみてはいかがでしょうか。
この質問が参考になると思います。

CSS - position、fixedで可変するヘッダーの下のコンテンツを被らないようにしたいです。｜teratail

Comments

[NakaShun_1129]

ありがとうございます！

他の回答者の方に教えていただき試したところヘッダーの高さ分下げることができました！

しかし、一点だけうまくいかない点があり、
スクロール時にヘッダーが固定されずに一緒にスクロールされてしまいます。
top: 0 も指定しているので原因がわかりません。

もし、何かご存知でしたら教えていただきたいです。

[Lhankor_Mhy]

手元にVueをコンパイルする環境がないので、現状ではわかりかねます。

たとえば、overflow: hidden などがあると上手くいかないことがあります。
https://teratail.com/questions/252903#reply-365018

[Lhankor_Mhy]

pug だけコンパイルしたもので、サンプルを作ってみましたが……ヘッダは固定するようでした。
https://jsfiddle.net/Lhankor_Mhy/qmec7xuj/

[NakaShun_1129]

ありがとうございます！
overflow: hiddenについては確認しましたが、特に使っていませんでした。

詳しく調べたところ、stickyを指定した要素の親要素にheightが指定されていないと固定されないようです。
なので親要素にheightを指定したとこを、問題なく実装できました！

本件、これで解決しましたのでクローズとさせていただきます。
非常に助かりました、ありがとうございます！

[Lhankor_Mhy]

お役に立てたようで何よりです。