0

因此，我得到了一个使用名为sticky 的jquery 库的Web 模板，当您滚动时，它会在页面顶部“粘贴”导航（从底部开始向上移动）。

我希望能够在导航到达其休息位置（后滚动）后将徽标放在导航上。类似于这个网站 - http://99u.com/。滚动经过图像标题后，徽标会淡入导航栏，然后停留在页面上。无论如何，这是jquery代码的摘录：

<script>
  $(window).load(function() {
    $('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
  });
</script>

这是html的摘录：

<div with image slideshow></div>
<nav>
  <div class="container">
    <div class="thirteen columns">
      <ul id="nav" class="links">
        <li id="sticker"><img src="[image i want to display after scroll]" /></li>
        <li>About</li>
        <li>Contests</li>
        <li>etc.</li>
      </ul>
    </div>
  </div>
</nav>
<div's and the rest of the page's content></div>

整个模板是响应式的。任何帮助将不胜感激，或者如果有人可以指出我正确的方向。谢谢！

4

3 回答 3

2

看看scrollTop和offset。

这是未经测试的，但它看起来像这样：

$(window).scroll(function(){
  if($("#nav").offset().top <= $(window).scrollTop)
    $("#nav").css({"position":"fixed","top":"0px", "left":"0px"});
  else
    $("#nav").css({"position":"relative"});
});

基本上，当用户滚动时，检查窗口滚动位置，如果它通过导航的顶部，则将导航切换到固定位置。在我上面的代码中，返回途中的检查可能需要稍微调整，但是当它们滚动到小于导航高度的位置时，将导航返回到相对定位。

此外，您可以显示/隐藏完全独立的导航，而不是切换到固定位置，实际上可能会让生活更轻松。

-肯

于 2013-06-14T20:58:11.897 回答
1

感谢您的建议。他们俩都有帮助！这是我最终做的事情：

<script>
  $(window).load(function() {
    $('#sticker').css({'display':'none'});
    $('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
    $(this).scroll(function() {
      if($('nav').offset().top <= $(window).scrollTop()) {
        $('#sticker').fadeIn('fast');
      } else {
        $('#sticker').css({'display':'none'});
      }
    });
  });
</script>
于 2013-06-17T14:42:47.233 回答
1

您可以测试菜单的位置属性，当它发生变化时，通过添加/删除一个类来隐藏/显示图像：

CSS：

#sticker.hidden { width:0; height:0; border:0; padding:0; margin:0; }
#sticker.hidden * { display:none; }

Javascript：

$(window).load(function () {
    $('nav').sticky({
        topSpacing: 0,
        className: 'sticky',
        wrapperClassName: 'my-wrapper'
    });
    var elem = $('#sticker');
    var nav = $('nav');
    var pos = nav.css('position');
    $(window).scroll(function(){
        if (nav.css('position')!=pos) { // if changed
            if (pos=='fixed') {
                elem.addClass('hidden');
            } else {
                elem.removeClass('hidden');
            }
            pos = nav.css('position');
        }
    });
});

jsfiddle

于 2013-06-14T22:43:59.833 回答