【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; }

完成

展開文章／收合

相關