This two-day company website facelift used fullpage.js this plug-scrolling, scroll the page contents of the entire screen, not a problem, the Internet also has various settings document.
The problem I'm having is that when the page content dissatisfied screen, and the contents of the above would put a too crowded, let alone in space on a screen, so embarrassed to say
footer is the bottom part of my part to be processed separately from the Internet a variety of information, summed up what individuals felt the easiest way to write an article for later reference.
<!--footer及倒数第二屏的HTML-->
<body data-spy="scroll">
<div id="dowebok" class="container-fluid">
<div class="section" id="nextS">
<div class="sect ">
<div class="sectcenter4"></div>
</div>
<div class="sect sectbg2">
<div class="container">
<div class="sectcenter5"></div>
</div>
</div>
</div>
<div class="section footerss"><footer class="footer" id="footer"></footer></div>
</div>
</body>
//初始化滚屏的一些内容,最重要的是设置好锚点,这里重点是最后一屏(footer)的锚点footerl
$('#dowebok').fullpage({
verticalCentered: false,
resize: true,
navigation: true,
anchors: ['section-1', 'section-2', 'lastScreen','footerl'],
});
These finished, as shown in the following is achieved the effect accounted for the entire footer a screen, and is displayed vertically centered. According to the effect to be achieved, to do it is to let footer #nextS the next screen (not centered vertically) + to #nextS this screen time, and then scroll down the screen a distance will not be a (must be footer height). Pressing the whole idea, to solve problems css
.section.footerss .fp-tableCell{//修改最后一屏display属性
display: block!important;
}
//实现footer紧挨着#nextS这一屏显示,底部出现
Modify the following question fullpage.js to find performMovement this method fullpage.js documents cited, as follows, to change it, you can achieve the desired effect (footer next to the previous screen, and scroll the height footer of height)
function performMovement(v){
// using CSS3 translate functionality
if (options.css3 && options.autoScrolling && !options.scrollBar) {
if (v.anchorLink == 'footerl'){ //当滚屏到最后一屏时间
footer_a = $('#nextS').height();//倒数第二屏的高度
footer_h = $('#footer').height(); //footer的高度
var translate3d = 'translate3d(0px, -' + (v.dtop - footer_a + footer_h) + 'px, 0px)';
}else{
var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
}
transformContainer(translate3d, true);
setTimeout(function () {
afterSectionLoads(v);
}, options.scrollingSpeed);
}
// using jQuery animate
else{
var scrollSettings = getScrollSettings(v);
$(scrollSettings.element).animate(
scrollSettings.options
, options.scrollingSpeed, options.easing).promise().done(function () { //only one single callback in case of animating `html, body`
afterSectionLoads(v);
});
}
}
After such a modification, do not worry about the last screen grievances of the screen.