Jquery 800px后向下滚动显示div

当从页面顶部向下滚动800px后，我想显示一个隐藏的div。现在我已经有了这个例子，但我想它需要修改，以实现我所寻找的

编辑：

[当向上滚动且高度小于800px时，此div应隐藏]

HTML:

jQuery：

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

---

这是我当前代码的一部分。

您在那里有一些事情要做。第一，为什么要上课？你真的有多个这样的页面吗？CSS建议你不能。如果没有，则应使用ID-在CSS和jQuery中选择两者会更快：

<div id=bottomMenu>You read it all.</div>

.fadeIn（）的工作原理是：首先执行display：（无论标记的适当显示属性是什么），不透明度：0，然后逐渐增大不透明度

完整工作示例：

CSS:

JS:

---

如果要在滚动若干像素后显示div:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

$（文档）。滚动（函数（）{
var y=$（this.scrollTop（）；
如果（y>800）{
$（'.bottomMenu'）.fadeIn（）；
}否则{
$（'.bottomMenu'）.fadeOut（）；
}
});
正文{
高度：1600px；
}
.底部菜单{
显示：无；
位置：固定；
底部：0；
宽度：100%；
高度：60px；
边框顶部：1px实心#000；
背景：红色；
z指数：1；
}

向下滚动

滚动条&
$（窗口）。scrollTop（）

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

我发现，在上面提供的解决方案中调用这样的功能（在整个论坛中有更多这样的例子，它们都很好地工作）只有在滚动条实际可见并运行时才会成功

如果（正如我可能愚蠢地尝试的那样），您希望实现这样的功能，并且您也希望实现一个没有滚动条的极简主义“干净屏幕”，比如在，那么
$（窗口）。scrollTop（）
将不起作用

这可能是编程的基础，但我想我会向任何新手提供一些建议，因为我花了很长时间才弄明白这一点

如果有人能提供一些关于如何克服这一问题的建议或更深入的见解，请随意回答，因为我不得不求助于在mouseover/mouseleave上显示/隐藏

长寿和计划，CollyG.
你也可以这样做

$(window).on("scroll", function () {
   if ($(this).scrollTop() > 800) {
      #code here
   } else {
      #code here
   }
});

你试过了吗？所有你需要做的就是确定你是否超过800像素，然后显示一个div。是的，我试过了！但是如何确定呢？有没有办法指定y的百分比？这很好，谢谢，非常有用。我唯一的意见是，它不包括用户返回页面，或者确实刷新页面，并且已经在页面中的某个特定点的情况。它只在卷轴上起作用。页面加载中需要有一些内容来检查位置，以便完成此操作。此外，围绕断点反复上下滚动会触发大量淡出，所有淡出都会叠加起来。任何现有的淡入淡出都应该被一个新的淡入淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出？可以直接检查。这一行可以替换为调用stop（），以修复上面提出的第二个问题，并至少在jQuery版本中减少代码行数。
#bottomMenu {
    display: none;
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
    border-top: 1px solid #000;
    background: #fff;
    z-index: 1;
}

var $win = $(window);

function checkScroll() {
    if ($win.scrollTop() > 100) {
        $win.off('scroll', checkScroll);
        $('#bottomMenu').fadeIn(2000);
    }
}

$win.scroll(checkScroll);

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

$(window).on("scroll", function () {
   if ($(this).scrollTop() > 800) {
      #code here
   } else {
      #code here
   }
});