問題タブ [affix]

検索しても正しい解決策が得られない

次の投稿からこれまでのところ取得しました： Bootstrap。複数の接辞属性を追加するには? 複数の接辞属性の使用

誰かが2つの問題で私を助けてくれませんか:

問題 1:

http://jsfiddle.net/Spiral57/b9xTs/

BLACKの背景を維持しながら、ヘッダー、navbar、およびnavwrapperを上部に固定する必要があります。

問題2

http://jsfiddle.net/Spiral57/wnbFf/

白い背景を維持しながら、ヘッダー、navbar、navwrapper を上部に固定する必要があります。これで、右側にロゴを残す必要があります。

私は自分のページに持っています：

• 高さ74pxの上部ナビゲーションバーを修正。
• 右側の列にサイドバー ナビゲーションを追加。
• 左の列には、切り替え可能なコンテンツがあります。

私が抱えている問題は次のとおりです。

• アンカー付きのリンクをクリックすると、左側の列のコンテンツが固定トップ ナビゲーション バーの下に隠されます (これは、おそらく margin-top: -74px; padding-top: 74px で修正します)
• 左の列のコンテンツを折りたたむと、接辞を使用したサイドバー メニューが狂ってしまいます。折りたたまれたコンテンツが表示されていると見なされているため、サイドバーのハイライトは間違った (非表示/折りたたまれた) コンテンツを指しています。

Bootstrap Affix 機能を使用して、ナビゲーション バーを全幅のレスポンシブ イメージの下に配置しようとしています。ユーザーがスクロールしてナビゲーション バーに到達すると、ユーザーがさらに下にスクロールすると、ナビゲーション バーは画面の上部に固定されます。以下にリンクされている JSFiddle はセットアップに役立ちましたが、上部のオフセットは動的ではないようです。代わりに、ヒーロー画像の元の高さに設定されているようです。そのため、画面サイズを拡大または縮小すると、接辞が意図したとおりに機能しなくなります。

JSFiddle はこちら: http://jsfiddle.net/MarkMarine/q3J56/7/

これは、Javascript でトップ オフセットを動的にしようとするために使用したコードです。

});

ヘッダー要素の下にある navbar 要素を追加すると、ヘッダー内の画像が存在しないかのように、navbar が途中で追加されます。

ナビゲーションバーは、ナビゲーションバーが一番上に達したときに固定されるはずです。これに使用したコードは、オフセットをナビゲーションバーのスクロール位置に設定しますが、問題は、この位置がヘッダー内の画像が存在しないかのように計算されることです。

画像の周りに p タグを付けてみました。画像の高さを固定の高さと自動に明示的に設定し、表示プロパティを考えられるすべての値に設定しましたが、役に立ちませんでした。ヘッダーに画像を浮かせていません。ヘッダーに追加のテキスト行を入れると、ナビゲーションはその高さに固定されます (ナビゲーションバーの固定のオフセット高さはテキストの高さを検出しますが、画像は検出しません)。

*編集: フィドルは正常に動作します (これは望ましい動作です)。 http://jsfiddle.net/gwho/8sAYW/ (このフィドルは何らかの理由で問題のある動作を示していません)。

coffeescript の JS

**編集: スクリーンショットに示すように、ローカル ホストの動作が異なります。

問題は、画像がレールのアセット パイプラインで最後に (navbar パーシャルの前に) 読み込まれることである可能性があると思います... js コードの navbar のオフセット位置は、画像がレンダリングされる前に計算されます... 一方、JS フィドルでは、この問題はありません。

すべての画像がロードされた後に実行されるように、JavaScriptコードの実行を延期する必要がある場合/どのようにすればよいですか?

タイトルで述べたように、Bootstrap で affix を使用して水平ツールバーを作成しようとしています。ツールバーが水平で接辞を使用している限り、ツールバーがウェル、ナビゲーション、またはパネルにラップされていてもかまいません。

私は現在井戸を使用しています。いくつかの Bootstrap コンポーネントを試してみましたが、結果はまったく同じです。

ツールバーが「固定」状態でない場合は正常に動作し、適切な幅などがありますが、固定が開始されると幅が失われposition: fixedます。私の知る限り、固定位置の要素は特定の幅を提供する必要があり、それで問題ありません。私の問題は、ツールバーが「固定」される前と同じ幅を維持する正確で信頼できる方法を見つけることができないことです。デバイスの解像度に関しては異なります。

「固定」ツールバーに適切な幅を提供するにはどうすればよいですか? 幅を指定しないと、ツールバーが小さすぎます。幅 100% を指定すると、ツールバーが右側にオーバーフローし、一部の UI 要素が失われます。

これは、私が抱えているのとまったく同じ問題を再現する例です: http://www.bootply.com/DAOHegIaTl。

これは、接辞に使用される CSS です。

私のhtml構造はそのようなものです：

http://jsfiddle.net/W5U7q/2/

誰かが私を助けることができますか？

ページをスクロールするか接辞サイドバーをクリックすると、コンテンツ ヘッダーが 40 ピクセルずれます (スティッキー トップ ナビゲーションでカバーされます)。

基本的に固定ナビゲーションではコンテンツが適切に表示されていません。

ここでそれを修正する方法についてのアイデアは大歓迎です!

ライブサイトの例はこちら

http://www.melindayang.com/portfolio-carmax.html

以下の寒さ：

粘着性のあるトップナビゲーション

接辞サイドバー

コンテンツ

JS

affixAngular ビューを変更したときに -ed パネルが動かない理由を理解しようとしています。

最初のページ (詳細) のパネルに接辞プロパティを直接追加し、2 番目のページ (フライト) でのみデータスパイに残しました。

本格的な Web バージョンでは、フライト ページを更新すると、突然接辞が表示され、スクロールしてもそのままになりますが、Angular を使用してページに移動しただけでは表示されません。

ビュー間を移動するときに、Bootstrap によって接辞がクラスに追加されていないようです。

HTML:

CSS:

これがプランカーです..

http://plnkr.co/edit/S0Bc50?p=preview

ここで同様の質問を見つけました：

Twitter Bootstrap: 単一ページ アプリケーションで Affix がトリガーされない

しかし、ここで私の問題にそれを適用する方法がわかりませんでした...

どんな助けでも素晴らしいでしょう！

ブートストラップを使用してナビゲーション バーが「固定」された場合、カスタム CSS も適用したいのですが、そのイベントを検出する方法がわかりません。Bootstrap の接辞には、このためのパラメーターがありません。

私のhamlコードは現在

助けてくれてありがとう=]

最初は上部に固定されていないナビゲーションバーがあります。ここでやろうとしているのは、たとえば150ピクセルのオフセットをスクロールすると、ナビゲーションバーが固定位置で上部に固定され、それを使用することですページの別のセクションにリンクするためのページ内アンカー、および上部に固定された接辞ナビゲーションバーは、ページ内の正しいアンカー領域を強調表示します (scrollspy?)

ここでの問題は、ナビゲーション バーが上部に固定された後、コンテンツの一部がナビゲーション バーの後ろに隠されているため、固定されたナビゲーション バーによってアンカーがページ上の正しい位置に向かわなくなることです。

私はこの問題についてかなり長い間調査しており、本文に padding-top を追加するための多くの提案を見てきましたが、スクロールによって接辞がトリガーされるまで、トップナビゲーションは修正されません。本文にパディングを追加した後も、ナビゲーションが正しく強調表示されない

以下のセクションの解決策を 試しました Bootstrap で ScrollSpy のオフセットを設定するにはどうすればよいですか?

説明が下手なのでスクリーンショットだけ載せておきます。

これは、スクロールして貼り付ける前のスクリーンショットです

これは、ナビゲーション バーが上部に固定された後のスクリーンショットで、ページ コンテンツまでスクロールします。

どのように機能させたいか

以下は私のコードです。

これはコンテンツ領域です

html の残りの部分は、section2、section3、および section4 にラップされたコンテンツです。

私のCSS

JS