当页面通过特定点时显示div

Question

我真的不太清楚从哪里开始。 有没有人知道一种方法，使一个div在页面上某个特定的div滚动过去后，从“display:none”（或任何类似的内容）更改为可见？

- Francesca

---

我知道，但我正在寻找关于如何编写一个能够实现这一点的脚本的特定建议。 - Francesca

你尝试过什么？你的HTML/CSS是什么样子的？我们在这里提供帮助，而不是代替你完成一切。 - Steve Robbins

http://archive.plugins.jquery.com/project/isOnScreen - Sablefoste

^ 不再是一个活动链接。 - Devon Kiss

Answer 1

首先，给你的

元素一个ID，例如dvid，假设其他你想要检测滚动的

元素有一个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
        }
    });
});

这是一个微小的 jsFiddle 演示: 微小的链接.

- Chris

---

@Tom 这只是一个概要，不是旨在成为可随意复制粘贴的代码 :) - Chris

Answer 2

在窗口的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";
};

Demo

- sachleen

Answer 3

滚动条 & "$(window).scrollTop()"

我发现，只有当滚动条显示和操作时，调用上面所提供的解决方案等功能才能成功。（在本论坛中有许多这样的例子——它们都很好用。）

如果你（像我一样愚蠢地尝试过）希望实现这样的功能，并且你还想要一个极简主义的“清屏”而没有滚动条，例如在此处的讨论，那么$(window).scrollTop()将不起作用。

这可能是一种编程基础知识，但我想提醒任何新手，因为我花了很长时间才弄清楚这一点。

如果有人能够提供如何克服这个问题或更多的见解，欢迎回复，因为我不得不转而使用onmouseover/mouseleave的show/hide 这里。

祝大家编程愉快，CollyG。

- collyg

Answer 4

修改@Abody97的答案以显示一旦滚过一个div。

http://jsfiddle.net/nickaknudson/f72vg/

$(document).ready( function() {
    $("#div_to_show").hide(); //hide your div initially
    $(window).scroll(function() {
        // once top of div is scrolled past
        if($(body).scrollTop() >= $("#div_to_scroll_past").offset().top) {
            $("#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
        }
    });
});

资源

• http://api.jquery.com/scrollTop/
• http://api.jquery.com/outerHeight/
• http://api.jquery.com/offset/

- nickaknudson

---

实际上，您可能想要重新检查使用.scrollTop()的div本身。这仅返回div具有的滚动条的位置（如果有的话）。抱歉 - 第一次没有仔细阅读您的代码 :) 我认为您想要使用.offset().top。 - Chris

你说得完全正确。我太快地阅读了scrollTop文档！谢谢！已编辑以符合要求 :) http://jsfiddle.net/nickaknudson/f72vg/ - nickaknudson

Answer 5

这里有一个工作的fiddle

关于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);
      }
    });

});

- Clyde Lobo

Answer 6

最简单的方法是使用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.
};

- BenR