powy1993/fullpage

如何添加头尾的自适应高度部分,让其上下滚动展示而不是盛放在当前页面中?

Opened this issue · 5 comments

效果参考:锤子
魅族

可以像 README.md 里面提供到的例子[http://1.fullpagechris.sinaapp.com/index.html] 那样 使用
position:fixed。
当然 positon:relative 也是可以的~

额...可能是我描述有误,是说像例子里的header和footer在滑动之前是隐藏不显示的,当滚轮滑动到顶端或底部基于同样的滚轮事件出现头尾信息,头部和尾部会自动挤压首屏和尾屏的视口。
类似fullpage.js里的多设置一个section并附着fp-auto-height类实现自适应高度的挤压
类似讨论:https://segmentfault.com/q/1010000002545277
代码示例:http://jsfiddle.net/reddy887/o4uywjrn/

实现的方式和 fullpage.js 不一样哦。(因为展示的时候实现方式也是不同的)
你可以在第一页增加 data-step,用class的方式控制元素,step1 等于 比较宽头部显示的,step2 等于原来的第一页样式。

我尝试增加最后一屏的高度120% 注销了body部分的overflow实现了内容展示,但最后一屏的滚轮事件无效了。然后按照你说的step做了尾部的滚动显隐,常规浏览没问题,但现在遇到一个问题是,我该如何让step兼容IE8(项目需求.),无动画只显示隐藏的方案也可。

1.step 是在任何浏览器下都会加的,只不过 ie8 可能没有 css3 过渡特效了。
可以针对ie8写 step 里面的hack 然后比如设置 top : xxxpx 这样来实现。只是没有过渡动画了。
其实你也可以自己改写组件里面的方法 自己加一个 onStepChange.. 然后判断完成之后自己写js。