Javascript 当页面上的某个点被传递时，使div显示

真的不知道从哪里开始。有人知道从显示中更改div的方法吗：一旦页面上的某个div被滚动过去，就没有（或任何类似的内容）？

首先，给你的

div

一个ID——例如

dvid

，并假设另一个

div

（你想在其之后检测滚动）有一个ID

othdiv

。 然后你可以这样做：

$(document).ready( function() {
    $("#dvid").hide(); //hide your div initially
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $("#dvid").show(); //reached the desired point -- show div
        }
    });
});

---

小小的JSFIDLE演示：。

在窗口的onscroll中，从页面顶部获取当前滚动位置以及div的位置，并相应地显示/隐藏元素

window.onscroll = function (oEvent) {
  var mydivpos = document.getElementById("mydiv").offsetTop;
  var scrollPos = document.getElementsByTagName("body")[0].scrollTop;

  if(scrollPos >= mydivpos)
    document.getElementById("noshow").className = "";
  else
    document.getElementById("noshow").className = "hidden";
};

---

最简单的方法是将jQuery与这样的函数一起使用

var eventPosition = 550; // This is the height position you want the event to fire on.
$(window).scroll(function(e) {
    if (window.screenY >= eventPosition) {
        fireEvent();
    }
});

function fireEvent() {
    // Add logic here to complete what you're trying to do.
};

---

修改@Abody97的答案，以便在div滚动过去后显示

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once bottom of div is scrolled past
        if($(body).scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

或一旦div的底部滚动过去

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once bottom of div is scrolled past
        if($(body).scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            $("#div_to_show").show(); //reached the desired point -- show div
        }
    });
});

资源

这是一份工作报告

jquery

$(function(){
    var d = $('.hidden');
    var dPosTop = d.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= dPosTop){
          d.show(2000);
        }
      else{
        d.hide(2000);
      }
    });

});

滚动条&“$（窗口）.scrollTop（）”

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

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

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

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

---

长寿和编程，CollyG。

我知道这一点，但我正在寻找关于如何编写脚本的特别建议。你尝试过什么？你的html/css是什么样子的？我们是来帮助你的，而不是为你做任何事。^不再是一个活跃的link@Tom这只是一个提纲；实际上，您可能需要使用

div

本身重新检查.scrollTop（）的使用情况。它仅返回

div

所具有的滚动条的位置（如果有的话）。抱歉--第一次没有仔细阅读您的代码：）我想您想要

.offset（）.top

。您完全正确。快速阅读scrollTop文档！谢谢编辑以符合以下要求：）