未分類

1. 使用佈景主題 OceanWP的元件，[Ocean Stick Anything](免費)
2. 將header固定
   
3. 自訂CSS
   #transparent-header-wrap {z-index: 999;}
.transparent-header {
-webkit-transition: all ease-out .5s;
-moz-transition: all ease-out .5s;
-o-transition: all ease-out .5s;
transition: all ease-out .5s;}
//以下為滾動後呈現的CSS樣式
.transparent-header.active {
background-color:#016d6f !important;}
4. 自訂JS
   jQuery(document).ready(function( $ ){
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".transparent-header").addClass("active");
} else {
//remove the background property so it comes transparent again (defined in your css)
$(".transparent-header").removeClass("active");
}
});
});

範例：金盛發 https://repairs.com.tw/

高度變化+陰影範例

CSS

#site-header {z-index: 999;}
#site-header.active {
box-shadow: 0 0 10px #00000030;}
#site-navigation-wrap .dropdown-menu >li >a.active {line-height: 50px;}
.oceanwp-mobile-menu-icon a.active {line-height: 50px;}

JS

jQuery(document).ready(function( $ ){
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$("#site-header").addClass("active");
$("#site-navigation-wrap .dropdown-menu >li >a").addClass("active");
$(".oceanwp-mobile-menu-icon a").addClass("active");
} else {
//remove the background property so it comes transparent again (defined in your css)
$("#site-header").removeClass("active");
$("#site-navigation-wrap .dropdown-menu >li >a").removeClass("active");
$(".oceanwp-mobile-menu-icon a").removeClass("active");
}
});
});