7

このページにある効果を生成しようとしています: http://jonrohan.me/guide/css/creating-triangles-in-css/ - ただし、CSS のみを使用し、JavaScript を使用しません (これは JavaScript では簡単です)。 .

私が話している効果は次のとおりです。

  • 最初に、ページ ヘッダーと記事のタイトルの両方が表示されます。
  • スクロールすると、ページ ヘッダーが消えます。
  • 記事のタイトルはページの上部に固定されるため、スクロールすると常に表示されます。

これまでに達成できた最高のものは次のとおりです。
http://jsfiddle.net/nottrobin/2FSvx/しかし、ソリューション
に固有のものの重複は好きではありません。<nav>

下にスクロールして が<header>消えたとき<nav>に、ページが自然にページの一番上に表示されるようにするために考えられる巧妙な CSS/3 テクニックを持っている人はいますか?

4

1 に答える 1

2

あなたの例にはいくつかの問題があります.Webページを上下にスクロールすると、2つのナビゲーションが重なってコンテンツが2回表示され、重なって表示されることがあります。

私の知る限り、CSS だけで同じ効果を得る手法はなく、JS が必要です。

CSS を使用して要素を配置できるのは、静的な方法 (通常のページ フロー)、固定された方法 (ブラウザー ウィンドウに相対的)、または絶対/相対 (位置が相対的に設定された最も近い親に相対的) のみです。

JavaScript の場合のようにスクロール イベントを「リッスン」することはできません。したがって、スクロールの量に応じて要素を配置したり、その位置の値をリアルタイムで変更したりすることはできません。これにも JavaScript が必要だからです。

CSS はプレゼンテーション マークアップ言語です。CSS ルールを使用して要素に割り当てるプロパティは、イベントごとに変更することはできません。

あなたがしたように何かをすることもできますが、それはより多くのマークアップ言語、より多くの CSS およびより多くのメンテナンスの問題を意味します。

JS を使用してユーザー エクスペリエンスを最適化する必要があります。ユーザーが JS を無効にすると、通常のページの動作が表示されます。それ以外の場合は、他のすべての Web サイトと同様に nav 要素がそのまま残ります。

于 2011-08-23T14:33:34.153 に答える