王新阳

wangxinyang

wow.js与fullpage.js结合使用时失效的解决办法

第一屏可以正常显示,从第二屏开始,使用wow效果的元素就不显示了 visibility:hidden;

原因:fullpage.js 配置中使用了 scrollBar:false,隐藏了滚动条,wow无法判断滚动条位置。

解决办法:fullpage.js配置中显示滚动条 scrollBar:true,然后使用css中隐藏滚动条 body{overflow:hidden !important;}。不能直接在<body>标签上设置style,会被fullpage.js重置overflow值。

如果还不行就在fullpage运行后执行wow,设置方法: $('#fullpage').fullpage({afterRender: function(){new WOW().init();}});。我程序中这两个的执行顺序并没有影响,看别人这么说的,记录下。

2018-08-22
2024-04-30 星期二 农历三月二十二