Question

因此，我获得了一个使用名为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>

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

Answer 1

查看scrollTop和offset。

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

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

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

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

-Ken

Answer 2

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

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

Answer 3

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

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

基于滚动的jquery hide / show

3 个答案: