1

Asp.net mvc (w/html5) を使用して Web アプリケーションを作成中です。以下は、アプリケーションのプロトタイプ レイアウト プランです。

ここに画像の説明を入力

ご覧のとおり、4 つの異なるセクションがあります。

  1. 格納式サイド メニュー (左にドッキング): これは、ユーザーがボタンをクリックしてスライドさせて非表示にできるサイド メニューです。その領域内のスクローラーでスクロール可能になります。
  2. ヘッダー バー (上部にドッキング): 上部にドッキングされたボタンがいくつかあるシンプルなセクション。
  3. コンテンツ エリア (使用可能なスペースに合わせて拡大): ユーザーが注目しているコンテンツが表示されます。これは、ユーザーがブラウザ ウィンドウをスクロールしたときにスクロールする唯一の領域になります。
  4. ボタンバー (下にドッキング): アプリケーションのボタンを保持するセクション。

したがって、私の本当の問題は、ウィンドウがスクロールされている場合でも常にその領域に表示されるように領域をドッキングするように設定する方法です(例は、右側のFacebookの広告バーまたはチャットの友達リストです) . ユーザーがブラウザー ウィンドウを下にスクロールするときよりもコンテンツ領域がブラウザー ウィンドウよりも長い場合 (または、アプリケーション内で独自のスクロールを処理するカスタムのスクロール可能なウィンドウを実装する必要がある場合)、ユーザーはコンテンツ領域を下にスクロールしますが、それ以外の場合はすべて下にスクロールします。領域はビューにドッキングされたままになります。どうやってこれを達成しますか？最近では、多くの Web サイト (facebook、twitter、windows azure など) がそれを行っているようです。任意の例をいただければ幸いです。

ありがとう

4

3 に答える 3

0

CSS の方法は、要素のpositionセットをfixed

このページに例があります: http://davidwalsh.name/dw-content/css-fixed-position.php右上の黄色の付箋を見てください。これは、その要素に関連する CSS です。

.element {
    position: fixed;
    top: 2%;
    right: 2%;
}
于 2012-07-23T21:45:58.160 に答える
0

Web の優れた点は、(Firebug やその他のツールを使用して) 他のサイトを調べて、それらがどのように構築されているかを確認できることです。

とはいえ、スティッキー領域が必要な場合は、うまく機能する jQuery プラグインである StickyFloatをお勧めします。

于 2012-07-23T21:43:47.977 に答える
0

私はあなたが望んでいたものを正確に提供するこの素晴らしいjQueryプラグインを使用しました..

UI レイアウト プラグイン

于 2014-05-22T10:58:11.117 に答える