0

私の小さな問題を解決する方法について、助けや指導が必要です。

サイト上の自分の位置に応じて、ナビゲーション テキストを変更したい。(位置1、位置2など)

ここにフィドルがあります：http://jsfiddle.net/iBertel/ah2zj/6/

固定ナビゲーション テキストを、これまでの位置に変更する必要があります。

編集：私はフィドルを編集したので、今はもっと理にかなっているかもしれません。

HTML

<div class="page-wrap">
    <div class="fixed-nav">
        <span>Position 1</span>
    </div>

    <div id="position1" class="link">
        page 1
    </div>
    <div id="position2" class="link">
        page 2
    </div>
    <div id="position3" class="link">
        page 3
    </div>
    <div id="position4" class="link">
        page 4
    </div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
}
.page-wrap {
    width:100%;
    height:100%;
    position:relative;
}
.fixed-nav {
    position:fixed;
    top:50px;
    left:50px;
    width:100px;
    height:50px;
    background-color:#CCC;
}

.link {
    width:100%;
    height:100%;
    border-top:1px solid #F20;
}

Jクエリ

まだありません - これを開始する方法が本当にわかりません。

私がこれに対する答えを見つけることができれば、誰かが私を助けてくれるか、私を導いてくれることを願っています。

乾杯、読んでくれてありがとう。

4

2 に答える 2

0

I hope I understood what you mean, and I think I already answered to a similar question

Don't you need something like this .. just have a look ta the fiddle attached: How to implement nav bar using jQuery

于 2013-10-16T10:06:16.113 に答える
0

完全な推測ですが、ユーザーがページ上でスクロールした場所に応じて、固定ナビゲーションのコンテンツを変更したいようですね?

もしそうなら、あなたはこのようなことをすることができます

$(document).ready(function(){
  $(document).scroll(function() {        
    if ($('body').scrollTop() > 600) {
      $('.fixed-nav span').text('Page 3+');
    } else if ($('body').scrollTop() > 200) {
      $('.fixed-nav span').text('Around page 2');
    } else {
      $('.fixed-nav span').text('Looking at page 1, ish.');
    }        
  });
});

http://jsfiddle.net/ah2zj/4/

編集：

各「ページ」の高さがどうなるかわからない場合は、代わりに次のようにすることができます

$(document).ready(function () {
  $(document).scroll(function () {
    $.each($('.link'), function (index, value) {
      var position = $(this).position();
      var top = position.top;
      var bottom = position.top + $(this).height();

      if ($('body').scrollTop() >= top && $('body').scrollTop() <= bottom) {
        $('.fixed-nav span').text($(this).attr('id'));
        return false;
      }
    });
  });
});

http://jsfiddle.net/ah2zj/7/

つまり、ユーザーがページをスクロールするたびに、すべてのページ要素をループして、ページ上の位置を決定します。ページ上のそれらの位置がスクロールの範囲内にある場合、その要素の ID でナビゲーションを更新します。

編集：

Firefoxがばかげている場合は、次のことを行う必要があります

var scrollTop = $(document).scrollTop();

http://jsfiddle.net/ah2zj/8/

于 2013-10-16T09:34:41.813 に答える