0

こんにちは...
固定ヘッダーに問題があります。ブラウザーをズームインまたはサイズ変更すると、ヘッダーの一部のメニューが失われる/非表示になる場所がわからない..

これは私のコードです:

    <div id="header">
    <ul>
        <li>Menu 1</li>
        <li>Menu 2</li>
        <li>Menu 3</li>
        <li>Menu 4</li>
     </ul>
</div>

css:

body{
     min-height:1000px;
}
#header{
     position: fixed;
     margin:30px;
}
#header ul{
     display:block;
}
#header ul li{
     float:left;
     list-style-type:none;
     width:110px;
     text-align:center;
     line-height:30px;
     padding-bottom:3px;
     background: #ccc;
}

デモ: http://jsfiddle.net/YgvND/1/

CSS の位​​置を制御する JavaScript プログラムが必要です。ブラウザをズームイン、ズームアウト、またはサイズ変更するときの私の目的は、cssヘッダーの位置が「絶対」に変わるようにすることです。

私の言語で申し訳ありません。x)
誰でも私を助けることができます....
thx..

4

2 に答える 2

0

私はあなたの質問を理解しているとは完全にはわかりませんが、やってみます。ページのサイズが変更されたときに#headerdivを絶対値として配置したいようです。したがって、jQueryを使用してウィンドウのサイズ変更を探します。

これはあなたの状況ではやり過ぎかもしれません。これにより、ページのサイズ変更が完了するとすぐに、cssの変更が#headerdivにバインドされます。

$(window).resize(function() {
  if (this.resizeTO) clearTimeout(this.resizeTO);
  this.resizeTO = setTimeout(function() {
      $(this).trigger('resizeEnd');
  }, 500);
});

$(window).bind('resizeEnd', function() {
  var header = $("#header");
  header.css({
      position: "absolute",
      top: "0px",
      left: "0px"
  });
});

これがデモです。

于 2012-09-26T20:23:19.787 に答える
0

jqueryを使用することをお勧めします。結果の変更を確認するための適切な方法については、こちらで説明しています

于 2012-09-26T19:02:20.720 に答える