Ajaxとjqueryを使用した垂直チケットのフィード

Question

私は20のニュースの垂直ティッカーフィードを実装しようとしています。ここで私は以下の点でこれを持っています：

1.）ティッカーは一度に最初の5つのニュースを表示する必要があります。ユーザーがチケットボックス内をスクロールダウンすると、他のニュースを20分前に見ることができます。

2.）ユーザーがニュース部門のセクションに移動すると、ニューステキストの左側にボックスが表示されます。ちょうどFacebookティッカーの場合のように。ここで重要なのは、このボックスは、news divセクションの位置に対して相対的に表示されるべきです。 news divセクションの現在の位置がページの一番下にある場合は、ホバーボックスが一番下に表示されます。同様に、ニュースのdivの位置がページの中央にある場合、中央にホバーボックスが表示されます。要するに、ホバーボックスは新しいdivセクションの位置に基づいて動的に位置を調整する必要があります。

私はこれを開発中に課題に直面しているので、皆さんの助けを借りて決定しました。主な課題は、固定された高さのスクロール可能なテロップボックスに5つの要素しか含まれないようにしようとする一方で、ホバーボックスも隠すことです。

Answer 1

移動コンテキストのdivを達成する最も簡単な方法は、すべてのアイテムに対してレンダリングし、ユーザーがティッカーアイテムの上を移動したときに表示することです。

各項目は、次にあなたは、単に負荷にdisplay:noneに.A1設定し、CSSで

.a:hover .a1 { 
display:block; 
} 

を追加<div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>

ようになります。スクロールするオーバーフロー-Yを設定するとき、あなたは余裕左リストにオーバーフロー-X境界を拡大（およびコンテンツの上にホバーを表示できるように）します設定することができ、あなたのオーバーフローの問題を解決するために

Example here

あなたが本当に欲しいものを得るには、JavaScriptを使用する必要があります。すべてのティッカーアイテムについてonmouseoverイベントを聞き、コンテンツディビジョンのY位置を一致させる必要があります。ここの例：codepen divのコンテンツの更新をソートし、表示する位置に基づいて左右の位置を修正する必要があります