Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【CSS】CSS のみ( Pure CSS )で「スクロール・ナビ.js」と同じ事が出来た⁉︎

jsだと、iOSの場合、position ヂェンジの際に、どうしてもシームレスに表示されない…。一旦position ヂェンジの際に、その要素の表示が消えてしまう。。

それをを解決したいと、ずっと頭の片隅にあって、

「もしやPosition を変える以外に方法は→ 色々試すが△。…。。 もしや position プロパティに、他のfixed やabsolute 以外の値があるのかなぁ…。。??」と思って調べたらありました!?

 

 

position: sticky;

 

 

SitePointさんが、2014年に記事にされておられました。

 

CSS “position: sticky” – Introduction and Polyfills

https://www.sitepoint.com/css-position-sticky-introduction-polyfills

 

f:id:DDramonQ:20161213191125j:plain

サイト先のDemoはうまく表示されていませんでしたが( 視聴環境: iOS ) 、ソースコードをDLし、試してたらうまく表示されました🌟

 

ポイントとしては、

- 親要素がoverflow  に設定してあるとうまく作動しない

 

ようです。

僕もまだW3C の方は、ザッとしか読めていないのですが。。w

一次ソースのリンクを置いておきます。

 

CSS Positioned Layout Module Level 3

   ∟ 6.5. Choosing a positioning scheme: position property -- W3C 

https://www.w3.org/TR/css-position-3/#position-property

f:id:DDramonQ:20161213191136j:plain

 

関連項目 - Normal Flow とは

https://www.w3.org/TR/css-position-3/#normal-flow

https://www.w3.org/TR/CSS2/visuren.html#normal-flow

 

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̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️