1

Twitter Bootstrap に基づいた流動的なレイアウトを使用する記事ページがあります。

トップ ナビゲーション バーは、次の手法を使用して、ブラウザー ウィンドウの上部にあるときに固定されます (くっつくように)。

http://www.bennadel.com/blog/1810-Creating-A-Sometimes-Fixed-Position-Element-With-jQuery.htm

上記の手法を使用し、このスレッドの回答を使用して、サイドバーも同時に固定されます。

Fluid Twitter Bootstrap 2.0 のサイドバー ナビゲーションを修正

スクロール バーは、ナビゲーション バーがブラウザー ウィンドウの上部にあると、期待どおりサイドバーの右側に表示されますが、次の例のようなカスタム スクロールバーを作成したいと考えています。

http://readwrite.com/2012/11/07/how-technology-will-fare-in-president-obamas-second-term

http://thenextweb.com/apple/2012/11/03/apple-hides-samsung-apology-on-its-uk-site-so-it-cant-be-seen-without-scrolling/

私は次のようなテクニックを使ってみました

http://manos.malihu.gr/jquery-custom-content-scroller/

しかし、成功しませんでした。また、上部のナビゲーション バーが固定されており、その高さが高いため、固定されたサイド バーのスクロール バーは、属性50pxのために下部のビューを超えて拡張されます。"top:50px;"

作成したデモは次のとおりです。

http://jsfiddle.net/iagdotme/uvp8t/

The Next Web または他の例で使用されているカスタム スクロールバー効果を作成し、高さの問題を修正するにはどうすればよいですか?

ありがとう。

4

2 に答える 2

1

TNW はTiny Scrollbarというプラグインを利用し、ReadWrite はjScrollPaneを使用します。それらのいずれかを試しましたか？高さの問題が残っている場合は、それらのいずれかを使用して jsFiddle で何かを作成することを検討してから、再投稿してください。

jScrollPane が機能するようになったら、カスタム スクローラーを使い始めるための CSS を次に示します。

.scroll-pane
{
    width: 100%;
    height: 200px;
    overflow: auto;
}

.jspVerticalBar, .jspTrack {
    background:none;
}


.jspDrag {
   background:#ccc;
   border-radius:10px;
}

次のフィドルで使用: http://jsfiddle.net/technotarek/m7eKD/

于 2012-11-08T02:58:02.527 に答える
1

この投稿 ( Parallax sidebar scrolling )で私の回答を見てください。これは、readwrite.com で使用されているサイドバーのスクロール動作を再現しています。

于 2013-03-01T22:52:12.123 に答える