【WP】側欄滑動固定欄位(浮動視窗) Sticky Sidebar / jQuery

這次要介紹的jQuery是Sticky Sidebar。

也就是像本頁左手邊側欄,有固定漂浮的效果。

讓它像跟屁蟲一樣,離不開你的網頁視窗!4步完成 ~

Sticky Sidebar

1. function.php 最下方加入:

register_sidebar( array(
 'name' => '浮動欄位',
 'id' => 'sticky-sidebar',
 'description' => '側欄滑動固定欄位。',
 'before_widget' => '<section id="%1$s">',
 'after_widget' => '</section>',
 'before_title' => '<h1 class="sidebar-title">',
 'after_title' => '</h1>',
 ) );
function sidebarizo() {
	wp_enqueue_script('sticky-sidebar.js', get_template_directory_uri() . '/js/sticky-sidebar.js', array('jquery') ); 
}
add_action('wp_enqueue_scripts',sidebarizo');

 

2. sidebar.php 的 <?php dynamic_sidebar( ‘sidebar-1’ ); ?> 後方加入

<div class="sidebar-convertible"><?php dynamic_sidebar('sticky-sidebar'); ?><div>

 

3. 上傳 sticky-sidebar.js目前佈景/js/sticky-sidebar.js

 

4. 於 style.css 仿效 .sidebar 新增一個 .sidebar-convertible 

.sidebar-convertible { float: left; margin-right: -100%; max-width: 410px; position: relative; width: 30%; } /*此CSS為範例,僅供參考*/

並新增

.sticky { position: fixed ; top: 0; z-index: -1; }

 

完成