問題タブ [affix]

ページに要素を追加しようとしましたが、スクロールするまでページの下部にとどまる必要があります。

jsフレームワークのcssとしてtwitterのbootstrapを使っているので、接辞クラスでやってみました。しかし、要素は常にその位置に留まり、スクロールしても機能が表示されません。

ここに私がやりたいことの例があります: http://www.brightpearl.com/features/shipping-management-software

これまでの私のコードは次のとおりです。

Twitter Bootstrap の Affix 機能を使用する場合offset、ページの上部からを設定できるため、ユーザーがスクロールしてポイントoffsetを超えると、サイドバーがユーザーと一緒にページを下にスクロールします。

一部のページでは、ユーザーがページの下部までスクロールすると、下の画像に示すように、私の接辞サイドバーがページのコンテンツ セクションを超えてページの mysub-footerとページにスクロールします。footer

質問:添付されたアイテムがコンテンツ セクション (最後の FAQ アコーディオンでここに示されています) よりも下に浮かないようにするにはどうすればよいですか?

更新 (コードを追加)

ブートストラップを使用して、ジャンボトロン トップ、サイドナビゲーション (上部に固定)、およびサイドナビゲーションをクリックすると上部に表示されるコンテンツのセクションを含むページを作成しています。機能的にはすべて問題なく動作していますが、メイン コンテンツの配置には助けが必要です。

私の目標は、可能であれば、サイドナビゲーションでクリックされたコンテンツのセクションをページの最上部ではなく、ブラウザ ウィンドウの最上部から約 70 ピクセル下に表示することです。各セクションの上部に 70px を簡単に追加できますが、ページのセクション間に余白が多くなりすぎてしまいます。コードは次のように構成されています...

サイドナビゲーションでクリックしたときに、各セクション X を上部から 70 ピクセル下に表示する方法はありますか?

このjsfiddleはそれを最もよく言っていますが、正常に機能するポップオーバートリガーがあります。ただし、コンテナを固定すると、ポップオーバーがつぶれてしまいます。なぜ、どのようにこれを修正するのですか?

Twitter ブートストラップで接辞プラグインを使用しようとしていますが、親コンテナー内でそれを制約する方法がわかりません。問題を示すために次の例を作成しました。

問題のデモ: http://www.codeply.com/go/DvcRXkeFZa

ご覧のとおり、スクロールするとサイドバーからはみ出し、ページの下部に到達してもページの下部に固定されません。

私の研究グループが作成したソフトウェア ライブラリのサイトのページのレイアウト用の html があります。これはブートストラップ 3 で行われます。私が達成したいのは、ジャンボトロンのすぐ下にあるナビゲーション バーが、そこにスクロールされるとページの上部に固定されることです。ページの左の列にある nag 要素についても同様の動作が必要です。ページがスクロールされて上部に到達すると、固定されてそこにとどまります。読んだところ、TwitterブートストラップのAffixがこれを行う方法であることがわかりましたが、これを正しく行う方法を完全に理解できるかどうかはわかりません。

以下の HTML では、ページ全体にまたがるはずの navbar が押しつぶされてスクロールした後、navbar リンクが navbar ブランドの 1 行下に移動し、バーがページにまたがらなくなります。affix を navbar で使用する方法を理解したら、それを nav 要素で使用したいと考えています。効果を得るために何をする必要があるかを誰か説明できますか? 私はウェブデザインにかなり慣れていません。

ありがとう、ベン。

HTML:

Web で何度か検索しても、自分のニーズに合ったソリューションが見つかりません。だから、あなたの誰かがそれを行うための良い方法を見つけるのを手伝ってくれるかもしれません.

Bootstrap を使用して、次のようなテンプレート構造を作成したいと思います: http://themes.mediacreed.com/html/synergy/#portfolio.html

• 2 つの主要部分: ナビゲーションとコンテンツ ラッパー
• ナビゲーションはサイドバーとして左側に「貼り付ける」必要があり、幅を固定する必要があります
• コンテンツ ラッパーは、ウィンドウのサイズに合わせて調整する必要があります。

Bootstrap でできると思いますか? 乾杯

貼り付けた要素から「停止」を設定したい。

例はhttp://9gag.com/での投票で、親コンテナまでスクロールします。

私はこれに接辞を使用しており、「data-offset-bottom」プロパティを見つけました（これはあまり文書化されていません）

まず第一に、これがどのように機能するのか、data-offset-bottom価値を計算する方法がわかりません。

接辞が 1 つしかないので、コンテナーに貼り付けたい (#ニュース)

この後、他の行用に少なくとも 1000px のスペースがあります。

また興味深いことに、 for data-offset-bottom="800、接辞底になると、要素が追加され"top:-998.765625px"ます 、このプロパティは値によって異なりdata-offset-bottomます