javascript - 如何在滚动后显示固定但如果屏幕小于则隐藏它

Question

我试图在用户向下滚动后在顶部添加一个固定的 div，但是如果调整大小的窗口小于 768px，如何隐藏相同的 div，如果窗口大于 769px，如何再次显示它？

$(document).scroll(function() {
          var y = $(this).scrollTop();
          if (y > 400) {
            $('.js-quick-navbar').show();
          } else if($(this).width() < 768) {
            $('.js-quick-navbar').hide();
          }
});

<强> jsFiddle

Answer 1

如果只是根据窗口宽度显示或隐藏 div 的问题，那么您可以使用媒体查询。

@media (max-width:768px){
  .quick-navbar {
      display:none;
    }
  }
}

http://jsfiddle.net/daveSalomon/qefoLdwa/7/

但是，如果您需要支持不支持 CSS 媒体查询的浏览器(哎呀!)，那么您可以使用 jQuery，并监听 window.resize。值得研究节流，并优化以下内容。例如，无论是否有必要，.show()都会被调用。它还会为窗口大小调整的每个 px 触发一个事件 - 您确实希望将它们批处理在一起并每 x 秒执行一次。 (很棒的帖子:http://benalman.com/projects/jquery-throttle-debounce-plugin/)

$(window).resize(function(){
  var w = $(this).width();
  if(w > 768){
      $('.quick-navbar').show();
  } else {
      $('.quick-navbar').hide();
  }
});

http://jsfiddle.net/daveSalomon/qefoLdwa/8/

错过了滚动部分 - 抱歉。

$(window).scroll(function(){ ... });
if(w > 768 && $(window).scrollTop() > 200){ ... }

http://jsfiddle.net/daveSalomon/qefoLdwa/9/