Question

我试图在页面滚动到顶部时隐藏div，并在不使用jquery时显示它。

任何方式都这样做？

编辑：通过隐藏和显示我的意思是淡入和淡出。

Answer 1

使用滚动事件和scrollTop()

的组合

$(window).on("scroll", function() {
    var scrollPos = $(window).scrollTop();
    if (scrollPos <= 0) {
        $(".theDivNeedsHiding").fadeOut();
    } else {
        $(".theDivNeedsHiding").fadeIn();
    }
});

编辑：更新了scrollTop查询，因为如果元素是window，jQuery会提供兼容性层。

Answer 2

jQuery scroll事件，并检查document.body.scrollTop（SO：Javascript: check IF page is at top）

$(window).scroll(function() {
    if(document.body.scrollTop == 0) {
        $("#hello").fadeOut();
    } else {
        $("#hello").fadeIn();
    }
});

jsFiddle

Answer 3

试试这个。向下滚动，当你回来时，它会消失。 http://jsfiddle.net/csdtesting/78sfqm57/

var $toTop = $('#toTop');
$(window).scroll(function() {
  if ($(this).scrollTop() > 100) {
    $toTop.fadeIn();
  } else if ($toTop.is(':visible')) {
    $toTop.fadeOut();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toTop" style="height:1000px;">
      I am gonna hide if you scoll up agaain!
</div>

使用jquery在页面顶部隐藏div

3 个答案: