当用户到达某个Div(滚动)时如何触发Fancybox
How To Trigger Fancybox When User Reaches Certain Div (On Scrolling)
快速提问:
1)我已经得到了标准的Fancybox (V2)设置工作,我希望它在用户读取页面时触发模态,然后达到某个div(或任何其他元素)。
2)所以这不是一个"延迟",它是当用户到达页面的某个部分。
谁能给一些编码光如何做到这一点?:)
(注:我不是一个程序员,但可以处理平庸的js/html/css…)
最简单的方法是检查滚动高度与您希望触发的元素的高度,然后模拟单击您想要打开的Fancybox链接。
更新:这个小提琴应该给你一个如何做的想法。http://jsfiddle.net/eKF4f/2/。这不是最完整的例子,但应该给你一个起点。
这是工作的部分
$(document).scroll(function () {
if($(document).scrollTop() >= $('#box').offset().top && !fired)
{
$.fancybox.open([
{
href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
title : '1st title'
}]);
}
});
注意:就用户体验而言,这通常是不好的做法。除非你有很好的理由打开一个模态,否则你不应该阻止页面内容,除非用户采取了触发模态的操作。
相关文章:
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 平滑滚动与Fancybox冲突“;附加自定义内容”;
- Jquery Fancybox 可拖动的滚动条问题
- jquery Fancybox Parent被滚动到顶部
- Jquery Fancybox高度/向下滚动
- fancyBox v2:如何防止Chrome中的背景滚动
- Fancybox update()函数重置我的滚动
- Fancybox:如何滚动HTML片段,而不是具有相同效果的图像
- 将html中的fancybox关闭按钮更改为一页滚动网站
- 滚动浏览所有fancyBox画廊
- 获取新内容后重新加载脚本(无限滚动wordpress+fancybox)
- 平滑滚动链接与/ fancybox冲突,将href改为class或id
- Fancybox内嵌弹出不移动的移动页面滚动
- 打开fancybox后滚动锚
- fancybox上的图像滚动效果
- Fancybox模式滚动不起作用
- 当用户到达某个Div(滚动)时如何触发Fancybox