Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

StickyNav.js (snippet) 作ってみた🌟

JsBin デモ

 

JS Bin on jsbin.com

 

因みにiPadからだと、embed版・jsbinページでもうまく表示されないと思うので、対処法を🌟

 

f:id:DDramonQ:20170430220655j:plain

f:id:DDramonQ:20170430220731j:plain

開いた先の「全面表示ページ」では上手く作動します🌟

f:id:DDramonQ:20170430220831p:plain

JavaScript

"use strict";

var _ = console.log;

var nav = document.querySelector('#nav'),
    navWrap = document.querySelector('#navWrap'),
    navWrapH = navWrap.getBoundingClientRect().height,
    navRect = nav.getBoundingClientRect(),
    navH = navRect.height,
    navTop = navRect.top,
    scrollY = 0;
        //_(navWrapH, navH)
window.addEventListener('scroll', function() {
    scrollY = 0 - document.body.getBoundingClientRect().top;
    
    if( scrollY > navTop ) {
        nav.classList.add('fixed');
        navWrap.style.height = navH + 'px';
    } else {
        nav.classList.remove('fixed');
        navWrap.style.height = '';
    }
});

こんな感じでどうでしょうか。。(´-`).。oO(ちょっと不安w)

Remove all ads
This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️