0

ブラウザの上端に到達するまでページと一緒にスクロールアップする必要があるバナーのプレースホルダーを作成する必要があり、その後上部に固定する必要があります。ページが下にスクロールされると、バナーもページとともに再びスクロールする必要があります。Watch Criticで例を確認できるように、私が十分に明確であるかどうかはわかりません。右側の列のバナーが、私が説明したとおりに動作することに気付くでしょう。

JavaScript の経験がないので、HTML と CSS だけで実現できますか?

4

2 に答える 2

0

CSSで固定位置を設定するとこうなります。より多くの動作を実現したい場合は、それらを CSS クラスとして定義できます。動作を変更する必要がある場合は、jQuery を使用してクラスを追加および削除するだけです。

于 2013-07-10T10:06:01.223 に答える
0

実際の例: http://jsfiddle.net/KXXhQ/

jQueryのイベントを利用しscrollて、ヘッダーに新しいクラスを追加して修正する必要があります。

jQuery

  //by default, the static menu is hidden
  var showStaticMenuBar = false;

  //when scrolling...
  $(window).scroll(function () {

      //if the static menu is not yet visible...
      if (showStaticMenuBar == false) {
          //if I scroll more than 200px, I show it 
          if ($(window).scrollTop() >= 200) {
              //showing the static menu
              $('#header').addClass('fixed');

              showStaticMenuBar = true;
          }
      }
      //if the static menu is already visible...
      else {
          if ($(window).scrollTop() < 200) {
              $('#header').removeClass('fixed');

              //I define it as hidden
              showStaticMenuBar = false;
          }
      }
  });

CSS

#header{
    display:block;
    width: 100%;
    height:50px;
    background: #ddff00;
}
#header.fixed{
    position:fixed; 
    top: 0;  /*fixing it at the top*/
    z-index: 999;  /* over any other element*/
}

実際の例: http://jsfiddle.net/KXXhQ/

于 2013-07-10T09:33:59.547 に答える