視覺差效果和吸頂式導航欄

2021-08-28 23:07:40 字數 1487 閱讀 2052

1.需要引用js包

2.寫html

3.引用css

.three 


.text-center_b 


.three_image
背景一定要設定position: absolute;和background-attachment: fixed;html裡面要加的一句：data-stellar-background-ratio="0.5 "4.js函式呼叫

1.寫好乙個導航欄

html部分**

pages


about us


contact


404portfollio


fullwidth


masonry


with title


single project


blog


shop


features
css樣式部分**

.one1 


.one1 h2 


/*第一層巢狀*/


.one1_ul 


.one1_ul li 


.one1_ul li a 


.one1_ul li a:hover 


/*第二層巢狀*/


.home_ul 


.home_ul li 


.home_ul li a 


.one1_ul li:hover .home_ul 


/** * 第三層巢狀


*/.servies_ul 


.servies_ul li 


.home_ul li:hover .servies_ul 


.glyphicon-lock 


.glyphicon-search 


.glyphicon-align-justify
2.設定當滑鼠滑到多少時顯示的吸頂導航欄的樣式

.sticky 


.sticky h2


.sticky .one1_ul li a 


.offset


.scrolling
3.用jquery獲取滑鼠滑到多少時會顯示導航欄，往上滑滑到多少時吸頂導航欄就會消失

效果圖：

吸頂導航欄彈出來的效果要使它柔和的彈出需要設定

transform: translate(0,-100%); 


transition: all 0.5s ease-in-out;

vue 吸頂選單效果小demo

整個吸頂小demo 場景描述，如下圖 功能描述 當滾動條劃過輪播圖的時候 讓正在熱映和即將上映 這塊吸頂，滾動條滾動回去的時候吸頂消失 吸頂效果邏輯 當滾動條滾動一定的距離例如 輪播圖 的時候加乙個class 滾回來刪除那個class 如果滾動距離大於等於輪播的高度 fixed 小於 unfixed...

利用css 實現 視覺差效果

html 布局 src images tridiamond logo circle.png alt height 80 width 80 tridiamond 向下滑動 三鑽因何而發生？我們不得不面對乙個非常尷尬的事實，那就是，從這個角度來看，三鑽的發生，到底需要如何做到，不三鑽的發生，又會如何產生...

jQuery自定義外掛程式之吸頂條效果

jquery自定義外掛程式之吸頂條效果是網頁中最常見不過的外掛程式了，所以寫乙個自用的jquery自定義外掛程式之吸頂條效果外掛程式，偷懶一下。上原始碼，想用的直接複製走，儲存在乙個js檔案即可使用。author jiaoshou date 2020 07 09 16 46 34 last modi...