根据位置更改导航中的文本

Question

我需要一些帮助/指导来解决我的小问题。

我希望我的导航文本根据我在网站上的位置而相应更改。（位置 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;
}

简讯

还没有 - 我真的不知道如何开始这个。

希望有人可以帮助我或指导我，如果我能找到答案。

干杯，感谢您的阅读。

Answer 1

完全猜测，但听起来您想更改固定导航的内容，具体取决于用户在页面上滚动到的位置？

如果是这样，你可以做这样的事情

$(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/

Answer 2

我希望

我明白你的意思，我想我已经回答了一个类似的问题

你不需要这样的东西吗..看看附上的小提琴：如何使用jQuery实现导航栏