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上收听。值得研究throttling，并优化以下内容。例如，无论是否有必要，都会调用.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/

Answer 2

<强> CSS

.hidden {
    display: hidden;
}
.visible {
    display: block;
}

@media (max-width:768px){
  .js-quick-navbar {
      display:none !important; // Added important since we may have the .visible class attached to it at times
    }
  }
}

<强> JS

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

如何在滚动后显示固定但在屏幕小于时隐藏它

2 个答案: