iT邦幫忙

0

fullpage 插件 無法取消固定menu位置

大家好,我是超級新手,本身是讀平面設計相關,最近開始學寫網頁,想要用fullpage插件完成自己的作品集網站,但遇到了以下問題,希望各位厲害人士可以解決我的疑問TT 非常感謝!

網頁上有用fullpage內建的navagation,是固定在左側位置的
但想要有一個頁面是menu選單頁(是在一個section裡),但是想要選單出現在那一頁就好了,不想跟nav一樣是位置固定在畫面。爬了很多文,用一般a href的話會直接跳轉頁面(也就是跳轉的那個頁面會被fullpage認定成第一個section,無法回到此頁面前的頁面),所以使用以下寫法:


		<div class="fp-section s1">
			<img src="image/01 mainpage/main bg.jpg" style="width:90%;">
			 <div id="menu"> <a href="#3rdPage"> <img src="image/01 mainpage/icon1-2.png" alt="" class="iconabout" ></a>
			      <a href="#4thPage"><img src="image/01 mainpage/icon2-2.png" alt="" class="iconpackage" ></a>
			      <a href="#5thPage"><img src="image/01 mainpage/icon3-2.png" alt="" class="icongraphic"></a>
			     <a href="#6thPage"> <img src="image/01 mainpage/icon4-2.png" alt="" class="iconmotion"></a>
			     <a href="#7thPage"> <img src="image/01 mainpage/icon5-2.png" alt="" class="iconphoto"></a>
			     <a href="#8thPage"> <img src="image/01 mainpage/icon7-1.png" alt="" class="iconcontact"></a></div> 

		</div>

js:

	<script>
	
	$(document).ready(function() {
$('#fullpage').fullpage(
{
		navigation: true, 
  		navigationPosition: "left", 
	   navigationTooltips:['Welcome!','Menu','About Me','Package Design','Graphic Design','Motion Design','Photographic','Contact'],
	//options 詳情參看https://github.com/alvarotrigo/fullPage.js/
  anchors: ['1stPage', '2ndPage', '3rdPage', '4thPage', '5thPage','6thPage','7thPage','8thPage'],
            menu: '#menu',
	
}
);
});
	</script>

但是menu會變成跟nav一樣固定在畫面,用position:absolute會整個不見,不確定是哪裡出錯了,或是還需要加什麼指令>< 非常感謝願意幫忙解答疑惑的人!!

Andy Tsou iT邦新手 5 級 ‧ 2021-06-20 22:30:51 檢舉
如過是作品集的話,直接用Notion? 是想順別學前端的話,也不太建議用jQuery了
ccutmis iT邦高手 2 級 ‧ 2021-06-21 09:23:39 檢舉
說個題外話

src="image/01 mainpage/main bg.jpg"

檔案命名規則參考:

https://www.ibm.com/docs/zh-tw/aix/7.1?topic=files-file-naming-conventions

檔案命名不好雖然不一定會馬上出錯,但是有可能在日後發生不可預期的錯誤,建議能避就避,這也是基本功的一部份,你如果要求速成就別求能客制化,要求能客制化你要有札實的基本功。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答