淺談jquery fullpage 插件增加頭部和版權(quán)的方法
更新時間：2018年03月20日 09:17:23 作者：FungLeo
下面小編就為大家分享一篇淺談jquery fullpage 插件增加頭部和版權(quán)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看
前言
一個頁面，我們通過 jquery-fullpage 插件來制作，整個是全屏滾動的。但是，我們希望在最后一頁增加一個版權(quán)，大概只有 100px 高，而不需要一個全屏來放版權(quán)。怎么做呢？搜索了一下，說了各種方法。什么修改源碼啦之類的，或者自己寫代碼判斷啦。暈死。其實，官方給出了解決方案。
下面，我們簡單的說下是怎么實現(xiàn)的
實現(xiàn)其實只需要 html 部分
<div class="fullpage"> <div class="section fp-auto-height">這里寫頭部</div> <div class="section">page1</div> <div class="section">page2</div> <div class="section">page3</div> <div class="section">page4</div> <div class="section fp-auto-height">這里寫版權(quán)</div> </div>
如上，js代碼就不說了，只要你能跑起來，就沒有問題。這里只需要給頭部和底部增加一個fp-auto-height 的 class 即可。
沒有生效嗎？
嘿嘿，那是因為你只引用了js，而沒有引用css造成的，只要引用下面的css即可。
https://github.com/alvarotrigo/fullPage.js/blob/master/dist/jquery.fullpage.css
其實關(guān)鍵代碼只是下面的而已
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
height: auto !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
height: auto !important;
}
小結(jié)
你的問題可能早就被人遇到了，一定有人給你解決過的。善于利用搜索引擎即可。
以上這篇淺談jquery fullpage 插件增加頭部和版權(quán)的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Jquery實現(xiàn)視頻播放頁面的關(guān)燈開燈效果
使用Jquery實現(xiàn)視頻播放頁面的關(guān)燈開燈效果。其中視頻顯示使用embed 元素，該元素是html5的元素，所以使用支持html5的瀏覽器效果會更好，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下2013-05-05
這篇文章介紹了Jquery庫及其他庫之間的$命名沖突的解決方法，有需要的朋友可以參考一下2013-09-09
jQuery 工具提示可以讓網(wǎng)站上一些小的幫助信息顯示更加直觀，提升用戶的體驗。2011-05-05
這篇文章主要為大家詳細介紹了layui導(dǎo)航欄效果的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
jquery網(wǎng)頁回到頂部效果(圖標(biāo)漸隱,自寫)
當(dāng)網(wǎng)頁內(nèi)容草雞多的時候，用戶就需要有個按鈕快速回到頂部，于是用js來實現(xiàn)下，畫布多說，直接上代碼2014-06-06
這篇文章主要介紹了jQuery中scrollTop()方法用法,實例分析了scrollTop()方法的功能、定義及返回或設(shè)置匹配元素的滾動條的垂直偏移量時的使用技巧,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了前端筆記之jquery部分，jQuery是一個兼容多瀏覽器的javascript庫2016-05-05
本文將詳細介紹jquery remove方法的一些應(yīng)用，需要的朋友可以參考下2012-11-11
easyui combotree加載靜態(tài)數(shù)據(jù)問題（選不上）解決方法
這篇文章主要介紹了easyui combotree加載靜態(tài)數(shù)據(jù)問題,選不上）2016-12-12