Help us understand the problem. What is going on with this article?

offset で取得できん!と思ったときのメモ

More than 3 years have passed since last update.

offsetで取得できん!とイライラしたので。

・メニューだけ上部に固定したい
・画面をふわっと表示させたい
と思ってやったときにoffsetがなかなかうまくいかんかったのでメモメモ

実行のタイミングが悪く画像などの高さがとれていなかった

$(document).ready(function() { 処理 });
だったので(DOMの構築だけ)、画像の読み込んだときの高さが認識されてなかった。
→ loadにした
$(window).on('load',function(){ 処理 });

こんな感じ
$(window).load(function(){
    var nav = $('.nav');
    //navの位置
    var navT = nav.offset().top;
    console.log(navT);

    //スクロールするたびに実行
    $(window).scroll(function () {
        var winTop = $(this).scrollTop();
        //スクロール位置がnavの位置より下だったらクラスfixedを追加
        if (winTop >= navT) {
        nav.addClass('fixed');
        } else {
        nav.removeClass('fixed');
        }
    });
});

②ふわっと表示させようとしてdisplay:noneにしていた。

ページをふわっと表示させようと
最初 bodyをdisplay:noneにして、fadeInさせてようとしていた。
これだと要素の高さがないので認識できない。

これだとふわっと表示はされるたoffset().topが0しかとれなかった。
$(function(){
    $('head').append('<style> body{display:none}</style>'); //disyplay:none;
    $(window).load(function(){
        $('body').fadeIn(1000);
    });
});

opacity:0 から 1 にするアニメーションに変えた。

これならうまくいった。
$(function(){
    $('head').append('<style> body{opacity:0;}</style>'); //opacity:0
    $(window).load(function(){
        $('body').animate( { opacity: '1',}, { duration: 600, easing: 'swing', } )
    });
});
dokkoisho
\-3saf-aアドpじゃdファsdp@んsdk」xzんb:↑a ;b dfoshdosaodpasポポポP----------ふぉぉぉぉぉぉおおぉx
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした