在设计WordPress网站时，为侧边栏添加滚动跟随效果带来了一系列的好处。这种效果能够提升用户体验，并在用户浏览内容时保持侧边栏的可见性，为网站增添了一份流畅和便捷的感受。无论是查看长篇文章还是浏览页面，用户都能方便地访问侧边栏中的信息、链接和导航。
实现侧边栏滚动跟随效果并不复杂，可以通过以下简单的步骤来完成：
1. 找到想要滚动跟随的模块
比如我的网站，我想要滚动跟随的是 id=”block-33″ 这个属性，我现在html 代码里面找到和这个全局唯一属性。
2.引入 Q2W3 代码
拿到 ID 之后，我们可以先修改下下面的代码， 在第四行的 『ID属性』更改成你网站需要滑动跟随的ID。然后插入在你网站即可。
// Q2W3 Fixed Widget
var q2w3_sidebar_options = [{"sidebar":"right","margin_top":10,"margin_bottom":70,"stop_id":"footer","screen_max_width":767,"screen_max_height":0,"width_inherit":false,"refresh_interval":1000,"window_load_hook":false,"disable_mo_api":false,"widgets":["ID属性"]}];
function q2w3_sidebar_init(){for(var e=0;e<q2w3_sidebar_options.length;e++)q2w3_sidebar(q2w3_sidebar_options[e]);jQuery(window).on("resize",function(){for(var e=0;e<q2w3_sidebar_options.length;e++)q2w3_sidebar(q2w3_sidebar_options[e])});var i=function(){for(var e=["WebKit","Moz","O","Ms",""],i=0;i<e.length;i++)if(e[i]+"MutationObserver"in window)return window[e[i]+"MutationObserver"];return!1}();0==q2w3_sidebar_options[0].disable_mo_api&&i?(q2w3Refresh=!1,new i(function(e){e.forEach(function(e){-1!=q2w3_exclude_mutations_array(q2w3_sidebar_options).indexOf(e.target.id)||e.target.className&&"function"==typeof e.target.className.indexOf&&-1!=e.target.className.indexOf("q2w3-fixed-widget-container")||(q2w3Refresh=!0)})}).observe(document.body,{childList:!0,attributes:!0,attributeFilter:["style","class"],subtree:!0}),setInterval(function(){if(q2w3Refresh){for(var e=0;e<q2w3_sidebar_options.length;e++)q2w3_sidebar(q2w3_sidebar_options[e]);q2w3Refresh=!1}},300)):(console.log("MutationObserver not supported or disabled!"),q2w3_sidebar_options[0].refresh_interval>0&&setInterval(function(){for(var e=0;e<q2w3_sidebar_options.length;e++)q2w3_sidebar(q2w3_sidebar_options[e])},q2w3_sidebar_options[0].refresh_interval))}function q2w3_exclude_mutations_array(e){for(var i=new Array,o=0;o<e.length;o++)if(e[o].widgets.length>0)for(var t=0;t<e[o].widgets.length;t++)i.push(e[o].widgets[t]),i.push(e[o].widgets[t]+"_clone");return i}function q2w3_sidebar(e){if(!e)return!1;if(!e.widgets)return!1;if(e.widgets.length<1)return!1;function i(){}e.sidebar||(e.sidebar="q2w3-default-sidebar");var o=new Array,t=jQuery(window).height(),n=jQuery(document).height(),r=e.margin_top;jQuery("#wpadminbar").length&&(r=e.margin_top+jQuery("#wpadminbar").height()),jQuery(".q2w3-widget-clone-"+e.sidebar).remove();for(var s=0;s<e.widgets.length;s++)widget_obj=jQuery("#"+e.widgets[s]),widget_obj.css("position",""),widget_obj.attr("id")?(o[s]=new i,o[s].obj=widget_obj,o[s].clone=widget_obj.clone(),o[s].clone.children().remove(),o[s].clone_id=widget_obj.attr("id")+"_clone",o[s].clone.addClass("q2w3-widget-clone-"+e.sidebar),o[s].clone.attr("id",o[s].clone_id),o[s].clone.css("height",widget_obj.height()),o[s].clone.css("visibility","hidden"),o[s].offset_top=widget_obj.offset().top,o[s].fixed_margin_top=r,o[s].height=widget_obj.outerHeight(!0),o[s].fixed_margin_bottom=r+o[s].height,r+=o[s].height):o[s]=!1;var d,a=0;for(s=o.length-1;s>=0;s--)o[s]&&(o[s].next_widgets_height=a,o[s].fixed_margin_bottom+=a,a+=o[s].height,d||((d=widget_obj.parent()).addClass("q2w3-fixed-widget-container"),d.css("height",""),d.height(d.height())));jQuery(window).off("scroll."+e.sidebar);for(s=0;s<o.length;s++)o[s]&&_(o[s]);function _(i){var o,r=i.offset_top-i.fixed_margin_top,s=n-e.margin_bottom;e.stop_id&&jQuery("#"+e.stop_id).length&&(s=jQuery("#"+e.stop_id).offset().top-e.margin_bottom),o=e.width_inherit?"inherit":i.obj.css("width");var d=!1,a=!1,_=!1;jQuery(window).on("scroll."+e.sidebar,function(n){if(jQuery(window).width()<=e.screen_max_width||jQuery(window).height()<=e.screen_max_height)_||(i.obj.css("position",""),i.obj.css("top",""),i.obj.css("bottom",""),i.obj.css("width",""),i.obj.css("margin",""),i.obj.css("padding",""),widget_obj.parent().css("height",""),jQuery("#"+i.clone_id).length>0&&jQuery("#"+i.clone_id).remove(),_=!0,d=!1,a=!1);else{var w=jQuery(this).scrollTop();w+i.fixed_margin_bottom>=s?(a||(i.obj.css("position","fixed"),i.obj.css("top",""),i.obj.css("width",o),jQuery("#"+i.clone_id).length<=0&&i.obj.before(i.clone),a=!0,d=!1,_=!1),i.obj.css("bottom",w+t+i.next_widgets_height-s)):w>=r?d||(i.obj.css("position","fixed"),i.obj.css("top",i.fixed_margin_top),i.obj.css("bottom",""),i.obj.css("width",o),jQuery("#"+i.clone_id).length<=0&&i.obj.before(i.clone),d=!0,a=!1,_=!1):_||(i.obj.css("position",""),i.obj.css("top",""),i.obj.css("bottom",""),i.obj.css("width",""),jQuery("#"+i.clone_id).length>0&&jQuery("#"+i.clone_id).remove(),_=!0,d=!1,a=!1)}}).trigger("scroll."+e.sidebar)}}"undefined"!=typeof q2w3_sidebar_options&&q2w3_sidebar_options.length>0?window.jQuery?q2w3_sidebar_options[0].window_load_hook?jQuery(window).load(q2w3_sidebar_init):"loading"!=document.readyState?q2w3_sidebar_init():document.addEventListener("DOMContentLoaded",q2w3_sidebar_init):console.log("jQuery is not loaded!"):console.log("q2w3_sidebar_options not found!");如果你不懂得如何在网站插入自定义 js、css 等代码，可以安装一个 Woody snippets 的自定义代码插件。也有一些主题是支持插入自定义JS，这个功能具体要根据网站主题而定。
总体而言这种小改动能够为您的网站增加交互性，让用户更轻松地访问侧边栏内容，提高了整体用户体验。