5

私はjQueryにまったく慣れていませんが、私が達成したいことはどういうわけか可能であるとほぼ確信しています。

下部にナビゲーションバーが固定されたページがあります。ナビゲーションバーには、下から上にスライドさせたい追加のパネルを切り替えるボタンがあります。これが私がこれまでに持っているものです：http：//jsfiddle.net/E4yGh/

ご覧のとおり、パネルはページの残りの部分を上にスライドし、所定の位置に留まります。代わりに、ページの残りの部分を上にスクロールしてパネルを表示する必要があります。ページはパネルの高さに応じて正確に上にスクロールする必要がありますdiv。これにより、パネルの下部がページの下部に固定されます。理想的には、パネルの高さを指定しなくても、自動的に調整されます。

どうすればいいですか？

4

6 に答える 6

7

上部の div に id を追加することで、slideToggle() をテキストの上部セクションに適用できます。次の行を jQuery クリック関数に追加します: (これにより、上部の div 全体が切り替わります)

$("#upper").slideToggle("slow");

上部の div を下部のセクションの高さだけスライドさせるには、CSS プロパティと .animate() を使用してみてください。

編集：

簡単な解決策は、ナビゲーション バーをページの上部に移動し、テキストの CSS 位置を「相対」に変更することです。 ここに例があります

編集：

これがあなたが最初に探していたと私が信じているものです:デモ

于 2012-07-23T11:23:32.977 に答える
2

どうぞ。コードの実例

于 2012-07-23T11:31:04.107 に答える
2

私が理解しているように、下部にナビゲーションバーを作成して、クリックするとスライドして詳細が表示されるようにしたいと考えています。もしそうなら、このリンクCREATING A SLIDE UP FOOTER USING JQUERYを見ることができます。

それが役に立てば幸いです、頑張ってください。

于 2012-07-25T08:39:00.020 に答える
0

divアイデアは、コンテンツをアニメーション化することだと思います。これを確認してください：http://jsfiddle.net/52MeD/

スライドアップをトリガーすると、の高さdiv#contentがアニメーション化されます。試行錯誤してサイズを選択しましたが、下部パネルに合わせてどれだけ縮小する必要があるかを計算するためにできる計算があると確信しています-怠惰で申し訳ありません. また、そのプロパティをアニメーション化してbottom、下部パネルが実際にコンテンツの下部を押し上げているように感じます (単にスペースを占有するのではなく)。もちろん、これを機能させるには、div#contentposition を に設定する必要がありますrelative。

理解していただければ幸いです。

于 2012-07-23T22:19:21.023 に答える
-1

このコードを試してください:

#lower {
      width: 90%;
      position: fixed;
      bottom: 0;
      background-color:#d5d5d5;
}

これはあなたを助けるかもしれません。

于 2012-07-23T10:50:55.917 に答える