Javascript 当页面上的某个点通过时使div显示

Make div show when a certain point on the page is passed

提问by Francesca

Not sure where to start with this one really. Does anyone know of a way to make a div change from display:none (or anything similar really) once a certain div on the page has been scrolled past?

真的不知道从哪里开始。一旦页面上的某个 div 被滚动过去，有没有人知道一种从 display:none （或任何类似的东西）更改 div 的方法？

回答by Chris

First, give your divan ID -- for example dvid, and suppose the other div(which you want to detect scrolling after) has an ID othdiv. Then you can do something like this:

首先，给你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
        }
    });
});

Tiny little jsFiddle demo: tiny little link.

Tiny little jsFiddle 演示：tiny little link。

回答by sachleen

In the window's onscroll, get the current scroll position as well as the div's position from the top of the page and show/hide your element accordingly.

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

演示

回答by collyg

SCROLLBARS & "$(window).scrollTop()"

滚动条和“$(window).scrollTop()”

What I have discovered is that calling such functionality as in the solution thankfully provided above, (there are many more examples of this throughout this forum - which all work well) is only successful when scrollbars are actually visible and operating.

我发现，调用上述解决方案中的此类功能（本论坛中有更多此类示例 - 一切运行良好）只有在滚动条实际可见并运行时才能成功。

If (as I have maybe foolishly tried), you wish to implement such functionality, and you also wish to, shall we say, implement a minimalist "clean screen" free of scrollbars, such as at this discussion, then $(window).scrollTop()will not work.

如果（正如我可能愚蠢地尝试过的那样），您希望实现这样的功能，并且您也希望，容我们说，实现一个没有滚动条的极简“干净的屏幕”，例如在本次讨论中，那么$(window)。 scrollTop()将不起作用。

It may be a programming fundamental, but thought I'd offer the heads up to any fellow newbies, as I spent a long time figuring this out.

这可能是编程基础，但我想我会向所有新手提供建议，因为我花了很长时间来弄清楚这一点。

If anyone could offer some advice as to how to overcome this or a little more insight, feel free to reply, as I had to resort to show/hide onmouseover/mouseleave instead here

如果有人可以就如何克服这个问题或更多见解提供一些建议，请随时回复，因为我不得不在此处显示/隐藏 onmouseover/mouseleave

Live long and program, CollyG.

长寿和计划，CollyG。

回答by nickaknudson

Modification of @Abody97's answer to show once a div has been scrolled past

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

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

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

ORonce the bottom of the div is scrolled past

或者一旦 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
        }
    });
});

RESOURCES

资源

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

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

回答by Clyde Lobo

Here is a working fiddle

这是一个工作小提琴

The jquery

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

});

回答by BenR

The easiest way to do this would be to use jQuery with a function like this.

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