0

ページにのリストがdivsあります：

<div class="section"><span>Client Information </span>
 <!-- Some fields here -->
</div>
<div class="section"><span>Billing Information </span>
 <!-- Some fields here -->
</div>
<div class="section"><span>Contact Information </span>
 <!-- Some fields here -->
</div>

ユーザーがページをスクロールするとNote、ブラウザの表示セクションの上に表示されます。

<div class="note">Note:Please fill all the required fields</div>

例えば

  1. ページが読み込まれClient Infomation、表示されているセクションです。注記は、クライアント情報セクションの上部に表示されます。

  2. ユーザーが下にスクロールするとBilling Information、セクションが表示されます。注記は請求情報セクションの上部に表示されます。

  3. ユーザーがContact Informationセクションに来ると、メモは連絡先情報セクションの一番上に表示されます。

  4. ユーザーがスクロールしてClient Informationセクションに戻ると、クライアント情報の上部にメモが表示されます。

重要 1: div は、セクション フィールドと重ならないように、セクションの上にのみ表示する必要があることに注意してください。

使ってみた

.note {
 position:fixed;
 width:100%;
 z-index:1080;
}

しかし、これは div オーバーラップ セクション フィールドに注意してください。

重要 2: セクション div は、固定ナビゲーション バーとロゴの下にあります。このようにして、最初のセクションが表示されます。div は、ロゴと最初のセクションの間に配置する必要があることに注意してください。

4

1 に答える 1

1

position:fixedウィンドウがメモ要素の垂直オフセットを超えてスクロールしたかどうかを検出し、その場合にのみ適用するには、JavaScript が必要です。

http://jsfiddle.net/bSZpf/

于 2013-10-28T16:32:56.833 に答える