WordPress 主题侧边栏随窗口浮动

现在大部分 WordPress 主题其实都自带侧边栏随窗口浮动功能,但这类需求依然存在,今天小编教你如何不用 WordPress 插件轻松实现。

操作流程:

将下面的 javascript 代码插入到当前 WordPress 主题头部 header.php 模版中。修改其中的“#sidebar”为 WordPress 主题侧边选择器名称;根据不同的主题头部模版高度,适当调整其中的数字“368”。

  1. <script type="text/javascript">
  2. var documentHeight = 0;
  3. var topPadding = 15;
  4. $(function () {
  5. var offset = $("#sidebar").offset();
  6. documentHeight = $(document).height();
  7. $(window).scroll(function () {
  8. var sideBarHeight = $("#sidebar").height();
  9. if ($(window).scrollTop() > offset.top) {
  10. var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
  11. var maxPosition = documentHeight - (sideBarHeight + 368);
  12. if (newPosition > maxPosition) {
  13. newPosition = maxPosition;
  14. }
  15. $("#sidebar").stop().animate({
  16. marginTop: newPosition
  17. });
  18. } else {
  19. $("#sidebar").stop().animate({
  20. marginTop: 0
  21. });
  22. };
  23. });
  24. });
  25. </script>
溫馨提示:

文章標題:WordPress 主题侧边栏随窗口浮动

文章連結:https://www.wuyanshuo.cn/1341.html

更新時間:2022年9月15日

1、本站所有資源均不添加推廣檔案或浮水印,壓縮包內若有廣告檔案和浮水印請勿輕易相信。

2、本站資源均為兩層壓縮,第一層7z(尾碼若為wys,請自行修改為7z)有解壓密碼; 第二層zip或cbz,無解壓密碼,可直接使用漫畫類軟件程式查看; 詳情可參攷解壓教程

3、本站大部分內容均收集於網絡! 若內容侵犯到您的權益,請發送郵件至:admin#wysacg.top我們將第一時間處理! 資源所需價格並非資源售賣價格,是收集、整理、編輯詳情以及本站運營的適當補貼,並且本站不提供任何免費技術支援。 所有資源僅限於參攷和學習,版權歸原作者所有!

给TA打赏
共{{data.count}}人
人已打赏
建站教程

WordPress 自定义文章类型添加后台分类筛选

2022-9-15 5:02:08

建站教程

WordPress 怎么对普通用户屏蔽后台菜单

2022-9-15 10:58:31

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索