McMaster-Carrのスクロールボックスのレイアウト

Question

数年前のMcMaster-Carrは、ウェブサイトを完全に再設計しました。これらの製品は、それぞれ非常にクールな「scrolling box」セクションを各製品に搭載しています。私はcssとhtmlだけを使ってその同じ効果を複製しようとしてきましたが、これまで運がなかったのです。

私だけのhtml + CSSを使用して達成することはできませんいくつかの重要な事柄：まだ含むdivの の先頭にスクロールしたときに停止

セクションヘッダをスクロールする能力を持つ

• 隠されたスクロールバー

  私はソースコードを調べてみましたが、実際には最初からやり直して、効果を再現したいと思っています。うまくいけば、それを再現するもっと簡単な方法を見つけることができます。

  このタイプのレイアウトを作成する前に、このようなことを誰かが見たことがある場合、またはこのタイプのレイアウトを作成する方法を知っている人は、助けてください。

  はここボックスのレイアウトをスクロールすることを実証しているマクマスター・カーのウェブサイト上のページへのリンクです：

  http://www.mcmaster.com/#nylon-gears/=g1p46z

Answer 1

を技術j08691 linkedには、それを行うための一般的な方法である - あなたがする必要がありますいくつかのJSを使って、サイトがどのくらいスクロールされているかを調べます。あなたが永続的なヘッダーの例のソースを見れば、

scrollTop = $(window).scrollTop() 

のような行があり、単純に（マクマスターでは、サイト上に固定されたように、それは、あると仮定して）自分の親のdivの先頭位置することによって、これを置き換える

scrollTop = $("div.MyParentDiv").position().top