Question

有没有人知道如何为Blogger的浮动/悬停页面列表（导航菜单栏）创建或了解HTML / CSS？如下所示：http://www.fabulousK.com＆amp; 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;}

Answer 1

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

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

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

使用粘性类添加另一个CSS。

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

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

然后添加以下脚本（最好放在一个小部件中，并将其放在博客的底部）（如果你已经有了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>

在Blogger中浮动/悬停PageList

1 个答案: