Question

我的div position: absolute;位于屏幕右上角。

.selectState {
  position: absolute;
  top: 96px;
  right: 0;
  font-size: 12px;
  background-color: #f1f1f1;
  color: #428bca;
}

当用户向下滚动时，我想要隐藏此div。如何用javascript或CSS做到这一点？

Answer 1

这是一个非jQuery跨浏览器解决方案：

window.addEventListener('scroll', function () {
  var scrollAmount = window.scrollY || document.documentElement.scrollTop;
  if (scrollAmount > 0)
    document.querySelector('your-element').style.display = 'none';
  else
    document.querySelector('your-element').style.display = 'block';
});

这适用于IE8 +。如果您希望在用户已经滚动一点时隐藏div，只需将数字0更改为您要隐藏它的位置。

Answer 2

如果你想使用jQuery，下面将会这样做：

// detect when the window is being scrolled
$(window).scroll(function(){
     // if the top is more than 96px (the top offset of your element)
    if($(window).scrollTop() > 96){
        // hide the element
        $('.selectState').hide();
    }else{
        // otherwise show it
        $('.selectState').show();
    }

});

你可以将它进一步减少到：

$(window).scroll(function(){
    $(window).scrollTop() > 96 ?  $('.selectState').hide() : $('.selectState').show();    
});

Answer 3

您可以使用Jquery执行此操作：

var $scrolldiv = $('#div'); // Add your div's id here
$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $scrolldiv.fadeIn();
    } else if ($scrolldiv.is(':visible')) {
        $scrolldiv.fadeOut();
    }
});

Answer 4

你不能用CSS做到这一点。因为CSS没有方法来捕获浏览器或窗口的事件。

但是，你可以使用JavaScript或jQuery来做到这一点。

$(window).scroll(function() { // scroll events
   // hide it here using CSS or the show() hide () methods...
});

这样，您就可以在DOCUMENT中获取用户的位置并更改属性。

滚动时隐藏绝对div

4 个答案: