当用户滚动到div时，jQuery淡入div [英] JQuery fade-in a div when user scrolls to that div

问题描述

当用户向下滚动到该div时，元素<div class="">会淡入.

An element <div class=""> will fade in when the user scroll down to that div.

我找到了一个使用jQuery插件的解决方案，以及另一个用于检查div在页面上是否可见的解决方案.有用.

I found a solution using a jQuery plugin and another solution to check whether the div is visible on the page. It works.

但是，一旦用户滚动到div的顶部，它就会淡入，所以用户看不到div的淡入.仅当用户滚动到div时，如何才能使div淡入div的底部，以便用户可以看到整个div的淡入效果?

However, as soon as user scroll to the top of div, it fades in too soon so user doesn't get to see the div fade in. How do I make the div fade-in ONLY if the user scrolls to the bottom of the div so that user can see a nice fade-in effect for the whole div?

推荐答案

您提到您使用了jQuery插件，但我不知道您是否尝试过

you mentioned that you used a jQuery plugin, i don't know if you have tried jQuery waypoints plugin, you can do it using this plugin easily by passing an offset option to the plugin as follows:

// by default your element will be hidden
$('div').hide();
// call waypoint plugin
$('div').waypoint(function(event, direction) {
    // do your fade in here
    $(this).fadeIn();
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});

offset :确定元素顶部必须距浏览器窗口顶部多远才能触发航点.它可以是一个数字(以像素数表示)，一个表示视口高度百分比的字符串或一个将返回多个像素数的函数.

offset : Determines how far the top of the element must be from the top of the browser window to trigger a waypoint. It can be a number, which is taken as a number of pixels, a string representing a percentage of the viewport height, or a function that will return a number of pixels.

因此，在上一个示例中，除非位于页面中间，否则div不会消失.

so on the previous example, your div won't fade in unless it's in the middle of the page.

这篇关于当用户滚动到div时，jQuery淡入div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！