Blogger 中的浮动/悬停 PageList

Posted 2023-02-16

【中文标题】Blogger 中的浮动/悬停 PageList

【英文标题】：Floating/Hovering PageList in Blogger

【发布时间】：2013-08-12 23:49:58

【问题描述】：

有谁知道如何为 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;浮动：无！重要；

【参考方案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>