编辑希望这更清楚。 :)当通过视口中途滚动时显示隐藏div
现在,当您向下滚动时,您会注意到只有在触摸视口顶部时才会显示粉红色的div。当它通过视口时,我怎样才能让它出现?
https://jsfiddle.net/1p751fz5/
// constants
var BTN_CLS = 'owl-thumb-item',
\t \t BTN_ANIMATION_MILLIS = 200,
\t \t DIV_ANIMATION_MILLIS = 1000;
// document ready handler
$(document).ready(function() {
\t
// display buttons from first 'div'
showBtns('one', BTN_CLS);
// window scroll handler
$(window).scroll(function() {
$('.hidden').each(function(i, v) {
if ($(window).scrollTop() > $(this).offset().top) {
\t // show 'div' when scrolling
\t showDiv($(this), onCompleteDivAnimation($(this)));
}
});
});
});
/**
* Used to show an animated 'div' and perform some actions.
* @param {Function} completeCallback Action performed after animation.
* @param {Object} div Target element.
*/
function showDiv(div, completeCallback) {
// check if 'div' is currently animated and avoid animation queue
if (!div.is(':animated')) {
div.animate({
opacity: 1
}, {
complete: completeCallback,
duration: DIV_ANIMATION_MILLIS
});
}
};
/**
* Used to perform actions after completing a 'div' animation.
*/
function onCompleteDivAnimation(div) {
\t showBtns(div.prop('id'), BTN_CLS);
};
/**
* Used to show button(s) from a 'div' element.
* @param {String} divId Target element Id.
* @param {String} btnCls Button(s) CSS class.
*/
function showBtns(divId, btnCls) {
var btnGroup = getBtnGroup(divId, btnCls);
animateBtn(btnGroup);
};
/**
* Used for creating a group of button(s) from a 'div' element.
* @param {String} divId Target element Id.
* @param {String} btnCls Button(s) CSS class.
* @returns {Array} btnGroup
*/
function getBtnGroup(divId, btnCls) {
var domBtns = $('#' + divId + ' .' + btnCls),
btnGroup = [];
for (var i = 0; i < (domBtns || []).length; ++i) {
btnGroup.push(domBtns[i]);
}
return btnGroup;
};
/**
* Used to animate a button group that normally comes from a 'div' element.
*/
function animateBtn(btnGroup) {
\t btnGroup = btnGroup || [];
$(btnGroup.shift()).fadeIn(BTN_ANIMATION_MILLIS, function() {
if (btnGroup.length > 0) {
animateBtn(btnGroup);
}
});
};
'imagePos'只在页面加载时设置一次,并使用'this'这是窗口 – charlietfl
@charlietfl所以我需要让它被多次调用? o.o – user2252219
yes ...请注意,滚动事件每秒触发很多次...应该使用一些去抖动以获得更好的性能 – charlietfl