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

powy1993 / fullpage

For desktop(ie5.5+) or mobile webApp without jQuery,create full screen pages fast and simple.

http://1.fullpagechris.sinaapp.com/index.html

749 stars 267 forks source link

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

Open Feahter opened 8 years ago

Feahter commented 8 years ago

效果参考：锤子魅族

powy1993 commented 8 years ago

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

Feahter commented 8 years ago

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

powy1993 commented 8 years ago

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

Feahter commented 8 years ago

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

powy1993 commented 8 years ago

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