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;
}

查询

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

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

欢呼，感谢您的阅读。

4

2 回答 2

0

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

你不需要这样的东西..看看附上的小提琴： 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 回答