-1

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;}
4

1 に答える 1

0

このためのチュートリアルを読みました。jQueryを使用して実行できます。

まず最初に、おそらく #PageList1 になる PageList の ID を取得する必要があります。

次に、通常追加したいスタイルを追加してから、

クラス sticky を使用して、別の CSS を追加します。

したがって、2 番目の例の場合、これはおそらく次のようになります。

.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>
于 2013-08-29T10:02:26.857 に答える