Question

不确定从哪个开始真的。有没有人知道一种方法可以从显示中进行div更改：一旦页面上的某个div滚动过去，就没有（或者真的类似）？

Answer 1

首先，为您的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
        }
    });
});

微小的jsFiddle演示：tiny little link。

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

Answer 3

SCROLLBARS＆amp; ＆＃34; $（窗口）.scrollTop（）的 的＆＃34;

我发现的是，在上面提供的解决方案中调用了这样的功能，（在整个论坛中有更多这样的例子 - 一切都运行良好）只有在滚动条实际可见并且正在运行时才能成功。

如果（因为我可能有愚蠢的尝试），你希望实现这样的功能，你也希望，我们可以说，实现一个极简主义的清洁屏幕＆＃34;没有滚动条，例如 this discussion ，然后 $（窗口）.scrollTop（）将无效。

这可能是编程的基础，但我认为我可以为任何新手提供头脑，因为我花了很长时间来解决这个问题。

如果有人可以提供一些关于如何克服这个或更多洞察力的建议，请随时回复，因为我不得不求助于显示/隐藏onmouseover / mouseleave here

长期和节目，CollyG。

Answer 4

一旦div滚过

，修改了@ Abody97的回答

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的底部滚过

，

OR

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

<强>资源

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

});

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

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

6 个答案: