2

私はこのインターフェースの概念を持っていますが、それが可能かどうかはわかりません。説明が難しいので、スケッチしてみました。

インターフェイス コンセプト スケッチ

私はいくつかの行動を達成する方法を知っていると思います:

  • <header>位置: 固定;
  • <nav>position: sticky (ポリフィルあり)
  • <section class="content box">--- まったくわからない

配置できるコンテンツ ボックスにクリップ パスを追加する何らかの方法があることを期待していました: 修正済み。そのため、ユーザーがスクロールすると、クリップ パスによって定義された領域からコンテンツ ボックスがのぞき見されます。

かなりのオプションを調べて、webkit-mask-attachment で解決策を見つけたと思ったのですが、そのプロパティは無効でした。

どんな助けでも大歓迎です。私は、レスポンシブに動作する必要がある純粋な CSS ソリューションを好みます。

乾杯、バート！

PS。<header>スクロール オフセットを監視し、高さとオーバーフローを設定するクラスを変更する JavaScript ソリューションを考えました。しかし、CSS ソリューションがあれば、私は本当にそれを好むでしょう。

更新 1

私は何かに取り組んでいます。position: sticky を使用していて、ポリフィルを気にしていないため、Firefox でのみ作業しています。スクロールすると機能します....しかし、下にスクロールして数秒待つと、何とか再配置または再描画され、赤いヘッダーが再び完全に表示されます。

なぜこれが起こるのか分かりますか？

Firefox でこのペンを試してみてください: http://codepen.io/anon/pen/GJBxYw

4

1 に答える 1

1

あ、見つけた！奇妙な振る舞い。svg オブジェクトを非表示にするために、svg の css プロパティを次のように設定します。

svg { display: none; }

どういうわけかスクロールするとき、これは問題ではありません。しかし、スクロールすると css ルールが適用されます。そのため、svg オブジェクトを非表示にするために、ルールを次のように変更しました。

svg {
  position: fixed;
  z-index: -1;
  top: 0;
  height: 0;
  width: 0;
}

そして、それはうまくいくようです。svg オブジェクトを非表示にするためのより良い方法があるかどうかわかりませんか?

この更新されたペンを Firefox で試してみてください: http://codepen.io/anon/pen/GJBxYw

XHTML 以来、深刻な FED を行っていないので、私は自分自身を非常に誇りに思っています。

于 2015-07-18T11:36:01.477 に答える