溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這兩天公司網頁改版用到fullpage.js這個滾屏插件，頁面內容整屏的滾動，不成問題，各種設置在網上也都有文檔。
而我遇到的問題就是，頁面內容不滿屏的時候，和上面的內容放一塊就太擠，單獨放一屏就太空，好尷尬的說
底部的footer部分就是我要單獨處理的部分，從網上搜了各種資料，總結了一下，個人覺著最簡單的方法，寫一篇文章以便以后查閱。
<!--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'],
});
寫完這些，實現的就是下面如圖的效果，整個footer占了一屏，并且是垂直居中顯示的。
根據要實現的效果，要做的就是讓footer緊挨著#nextS這一屏（不垂直居中）+到#nextS這一屏的時候，再往下的滾動距離就不能是一屏了（必須是footer的高度）。
按著整個思路，先解決css的問題
.section.footerss .fp-tableCell{//修改最后一屏display屬性
display: block!important;
}
//實現footer緊挨著#nextS這一屏顯示，底部出現
下面修改fullpage.js的問題，在引用的fullpage.js文件中找到performMovement這個方法，按照如下方法，修改一下，就可以達到想要的效果（footer緊挨著上一屏，并且滾動的高度是footer的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);
});
}
}
這樣修改了之后，就不用擔心最后一屏不滿屏的問題了。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
