13

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

4

6 回答 6

31

首先，给你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 演示：微小的链接。

于 2012-08-14T18:04:25.673 回答
5

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

演示

于 2012-08-14T18:07:35.457 回答
2

滚动条和“$(窗口).scrollTop()"

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

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

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

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

长寿和编程，CollyG。

于 2015-02-07T14:51:02.587 回答
0

修改@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
        }
    });
});

资源

于 2012-08-14T18:08:59.247 回答
0

这是一个工作小提琴

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

});
于 2012-08-14T18:13:03.580 回答
-1

最简单的方法是使用 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.
};
于 2012-08-14T18:07:44.913 回答