0

繰り返しになりますが、私はjQueryにまったく慣れていないので、単純に見えても何時間も行き詰まってしまうことがまだたくさんあります。

現在、リンクのターゲットを置き換えようとしています。私はその方法を知っています。ただし、現在表示されているdivに基づいてターゲットを変更する必要があります。

これがワイヤーフレームです：

ここに画像の説明を入力してください

もちろん、リンクは矢印上にあり、ビューポートの下部に固定されています。ご想像のとおり、訪問者が＃div1にいるときは＃div2を、＃div2にいるときは＃div3を指すリンクが必要です...

私はこれを行うためのいくつかの方法を考えました：

1）divへのリンクの代わりに、矢印はXピクセルのスクロールをトリガーするだけです。すべてのdivは同じ高さでなければならないので、それは機能します。ただ、ユーザーは矢印をクリックする代わりに、常にマウスで自分自身をスクロールすることができました。そして、そうする場合、後で矢印をクリックすると、おそらくどこにも行かないでしょう。

2）どのdivがホバーされているかに応じて、リンクのターゲットを置き換えることができます。ただし、これにより、他に2つの問題が発生します。モバイルデバイスではリンクがまったく置き換えられないことと、カーソルが矢印自体にカーソルを合わせているときにリンクが置き換えられないことです。これは、リンクが固定されているためです。

したがって、理想的なソリューションは、表示されているdivの割合に応じて、実際にリンクのターゲットを置き換えます。＃div2の50％以上が表示されている場合、リンクのターゲットは＃div3になります。

それが完璧な解決策になると思います。しかし、私はこれをどのように行うかについて全く手がかりがありません。^^

助けていただければ幸いです。:-)

前もって感謝します！

編集：実際、私が考えた今、特定のdivの50％以上が表示されている場合、ソリューションはリンクのターゲットを置き換えるべきではありません。divの高さは1100pxであるため、画面定義がそれよりも低い人（ほとんどの人）がサイトにアクセスすると、問題が発生します。したがって、＃div2の表示されている高さが＃div3の高さよりも大きい場合、スクリプトは実際にリンクのターゲットを＃div3に置き換える必要があります。それが解決策を思いつくのをより簡単にするかどうかはわかりません。：-/

4

2 に答える 2

0

私はこれがあなたが探しているものだと思います：あなたのhtmlは次のようになります：

<div class="wrap" id="div1"></div>
<div class="wrap" id="div2"></div>
<div class="wrap" id="div3"></div>
<div class="wrap" id="div4"></div>

だから、その余分なクラスだけで。次に、この小さなライブラリhttp://www.appelsiini.net/projects/viewportをダウンロードして、次のように使用します。

$(document).scroll(function(){
var a = "#" + $(".wrap:in-viewport").attr('id');
$('a#arrow').attr('href', a);
})

ドキュメントがスクロールされると、どのdivが表示されていても、そのIDが矢印アンカーに追加されます。

これがあなたが望んでいたものであることを願っています

于 2013-01-02T19:13:13.853 に答える
0

これは私があなたの問題を解決する方法です：

Position:relative を使用していると思います。その場合、ビューポート コンテンツのオフセットを取得し、各 DIV の高さで割って (それらはすべて同じであるため)、DIV の数を得ることができます。この数を使用して、どの子が表示されているか (またはほとんど表示されているか) を判断し、そのリンクを含むその子のデータ属性を尊重します。

コードで説明する必要がある場合はお知らせください。

お役に立てれば。幸運を。

于 2013-01-02T17:22:58.897 に答える