将 css 添加到 style.css
#masthead {
position: fixed;
top: 0;
width: 100%;
}
@media screen and (min-width: 768px) {
/*resizing the logo image */
#masthead.sticky .custom-logo-link img {
width: auto;
height: 40px;
}
/*positioning the main-navigation */
#masthead.sticky .main-navigation {
text-align: right;
position: fixed;
top: 0;
right: 300px;
padding: 0;
width: auto;
}
/*positioning the logo*/
#masthead.sticky .custom-logo-link {
position: fixed;
top: 0;
margin: 0;
padding: 0;
}
/*adjusting default margins and paddings*/
#masthead.sticky .site-header-cart .cart-contents{
padding:1em 0;
}
#masthead.sticky .main-navigation ul.menu>li>a, .main-navigation ul.nav-menu>li>a {
padding: 1em 1em;
}
#masthead.sticky .site-branding{
margin-bottom: 1em;
}
/*positioning the cart-menu */
#masthead.sticky .site-header-cart {
width: 14% !important;
position: fixed !important;
top: 0;
right: 12%;
padding: 0;
}
/*applying the position fixed on the masterhead */
#masthead.sticky{
position: fixed;
top: 0;
width: 100%;
}
/*removing the site search*/
#masthead.sticky .site-search{
display:none;
}
}
在主题的 js 文件夹中创建一个文件“stickyheader.js”。并添加以下代码
(function($){
$(document).ready(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > 100){
jQuery('#masthead').addClass('sticky');
}
else{
jQuery('#masthead').removeClass("sticky");
}
});
});
})(jQuery);
将此代码添加到functions.php,以便包含js文件
$path = get_stylesheet_directory_uri() .'/js/';
if (!is_admin()) wp_enqueue_script('stickyheader', $path.'stickyheader.js',
array('jquery'));