iT邦幫忙

0

請問導覽列隨著網頁滑動改變css的方法?

  • 分享至 

  • xImage

首先先給大家看看我想要的效果:
圖中的橫列本來在網頁的某個位置,但隨著網頁滑動到某個位置,橫列直接跟隨著網頁繼續移動
https://ithelp.ithome.com.tw/upload/images/20200313/20124260jphaoybDGf.jpg
https://ithelp.ithome.com.tw/upload/images/20200313/2012426073f7ailTDs.jpg
但是,不知道為甚麼我寫的js程式總是報錯

<script type="text/javascript">

$(function(){
    $(window).scroll(function () {
	var $menu = $('#category');
        var scrollVal = $(this).scrollTop();
        if(scrollVal>450){
		$menu.css('position', 'fixed');
		$menu.css('top', '0px');
	}
	else{
		$menu.css('position', 'absolute');
		$menu.css('top', '450px');
	}
    });
});

</script>

這是網頁的報錯信息:
https://ithelp.ithome.com.tw/upload/images/20200313/20124260vBXdk7Bhax.jpg

這是我的網站,我需要圖片中的藍色橫條達成上面範例圖的效果:
http://typhooooon.pixnet.net/blog
https://ithelp.ithome.com.tw/upload/images/20200313/20124260T6s9RaonvH.jpg

請問各位大大我的程式哪裡錯了?我自己找了好久都找不出來?
p.s我的網站和範例圖中的網站都是痞客邦的部落格

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
舜~
iT邦高手 1 級 ‧ 2020-03-13 22:54:18

jquery有載入成功? 還是$已被其他套件用掉了,不代表jquery?

jquery - is not a function error
jQuery TypeError: $(…). is not a function 簡單的解決方法

25285132 iT邦新手 5 級 ‧ 2020-03-14 18:44:37 檢舉

jquery沒載入成功

0
theRookie
iT邦新手 1 級 ‧ 2020-03-19 09:49:02

我想這是你需要的

可以使用skroll去抓取現在頁面的滾動條在哪
進而控制導航列該怎麼顯示

我要發表回答

立即登入回答