jquery基于滚动隐藏/显示答案

【问题标题】：jquery hide/show based on scrolljquery基于滚动隐藏/显示
【发布时间】：2013-06-14 20:51:48
【问题描述】：

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

我希望能够在导航到达其静止位置（滚动后）后将徽标放在导航上。类似于这个网站 - 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>

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

【问题讨论】：

标签： javascript jquery scroll show-hide

【解决方案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"});
});

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

除了切换到固定位置，您还可以显示/隐藏一个完全独立的导航，实际上可能会让生活更轻松。

-肯

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：