滚动位置时显示 Div

Question

首先，我想提到这个网站：http://annasafroncik.it/ 我喜欢动画的呈现方式。

在jQuery中创建类似的功能难吗？ 是否有插件可以创建这样的效果？希望有人能帮忙。

- idbranding

Answer 1

基本上，你想要将“hideme”类添加到每个需要隐藏的元素中（然后将该类设置为“opacity:0”）;

然后，使用jQuery设置一个$(window).scroll()事件，检查每个“hideme”元素的底部位置与可见窗口的底部边缘之间的位置。

这是它的核心...

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},500);

        }

    }); 

});

这是完整的jsfiddle示例: http://jsfiddle.net/tcloninger/e5qaD/

- Timothy Aaron

---

哇，我喜欢这个例子，代码非常清晰简洁！问题解决了。 - idbranding

你提到了一个插件，这里是我刚刚做的一个：http://timothyaaron.com/js/fadein.on.scroll.js它会自动隐藏当前视图之外的所有元素，并在滚动时淡入它们（使用“hideme”类元素，请确保您没有将其用于其他任何原因）。 - Timothy Aaron

我更新了你的jsfiddle（http://jsfiddle.net/e5qaD/1151/），以加快大页面的速度。更新会在所有内容都显示完毕后关闭滚动监听器，并且只在需要时淡入项目。 - beingalex

我在这方面并不是专家，但我感觉现在应该使用.offset()而不是.position()。另外，顺便提一下，重要的是要使用opacity而不是jQuery的hide()、toggle()等方法，因为后者会实际上弄乱元素的位置。 - cregox

.offset()方法允许我们检索元素相对于文档的当前位置。与之形成对比的是.position()，它检索相对于偏移父元素的当前位置。因此，如果您的偏移父元素与文档不同，则必须使用.offset()。我会调整代码以反映这一点。 - Timothy Aaron

这正是我正在寻找的。这应该被标记一下 :) - Gjert

Answer 2

插件？也许可以，但是如果你对选择器和CSS有牢固的掌握，你完全可以自己构建任何你想象得到的动画组合。天空才是极限！我建议从jQuery网站开始，并查看一些示例。

为了帮助您入门，并为您提供一些想法（如果您已经熟悉jQuery），您可以尝试以下操作...找出页面上您的

距离顶部有多远，监听滚动事件，并且当

进入焦点时（即：页面已经滚动过

的位置），运行一个动画。类似这样的东西：

<div id="my_div">Some content</div>

<script type="text/javascript">

    $(document).ready(function() {

        var my_div = $("#my_div");
        var div_top = my_div.offset().top;

        $(document).scroll(function() {
            if (div_top <= $(document).scrollTop()) {
                // do some cool animations...
            }
        });

    });

</script>

我希望我没有搞砸我的语法！

- Chris Kempen

Answer 3

试一下这个。这个方法对我有效。

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 400) {
    $("body").addClass("allowshow");
  } else {
    $("body").removeClass("allowshow");
  }
});

而这个的 CSS 是

.showmydiv{display:block}

- Shuhad zaman