Blogger 中的浮动/悬停 PageList答案

【问题标题】：Floating/Hovering PageList in BloggerBlogger 中的浮动/悬停 PageList
【发布时间】：2026-02-16 02:55:01
【问题描述】：

有谁知道如何为 Blogger 的浮动/悬停页面列表（导航菜单栏）创建或了解 HTML/CSS？如此处所示：http://www.fabulousK.com & http://apairandasparediy.com/。我只想在用户在我的网站上向下滚动时显示它。如果有帮助，我正在使用此代码来编辑 PageList 的文本。

.PageList {text-align:center !important; 
text-transform:uppercase; 
border-top: solid black 1px; 
border-bottom: solid black 1px; 
letter-spacing:2px} .PageList li 
{display:inline !important; float:none !important;}

【问题讨论】：

您能否发布一些代码，以便我们知道您实际上在尝试什么？
@simonmorley 我没有任何我试图操纵的代码。我所拥有的只是上面的链接示例。对不起！这只是 Blogger 中的基本 .PageList。
您可以在此处发布问题之前尝试编写一些代码。你会从你的同行和 SO 社区中得到更好的反应。
@simonmorley 既然您如此热衷于对新手进行 SO Q&A 系统礼仪方面的教育，那么我将给您我所得到的。这是一段用于编辑页面列表文本的代码。抱歉，如果这对您来说还不够好..PageList {text-align:center !important;文本转换：大写；边框顶部：纯黑色 1px；边框底部：纯黑色1px；字母间距：2px} .PageList li {display:inline !important;浮动：无！重要；}

标签： menu blogger menubar navigationbar blogspot

【解决方案1】：

我已经阅读了这方面的教程。可以使用 jQuery 来完成。

首先，您需要拥有 PageList 的 ID，这可能是#PageList1

然后只需添加您通常想要添加的样式，然后

使用sticky类添加另一个CSS。

所以在第二个例子的情况下，这可能看起来像这样：

.sticky{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
}

然后添加下面的Script（最好在一个小部件中，放在你博客的底部）（如果你已经有jQuery框架，则不需要添加第一行。

这个 scipt 所做的是将类粘性添加到您的页面列表，因此当您向下滚动时它会粘在顶部。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type='text/javascript'>
//<![CDATA[
   $(window).scroll(function(){ 
  var offset = 0;
  var sticky = false;
  var top = $(window).scrollTop();

  if ($("aside").offset().top < top) {
   $("#PageList1").addClass("sticky");
   sticky = true;
  } else {
   $("#PageList1").removeClass("sticky");
  }
 });
//]]>
</script>

【讨论】：