1

友人のためにサイトを構築しており、固定ヘッダーを実装しました。

http://scsports.comeze.com/blog.php

問題は、スクロールするとヘッダーが約 7px 右に移動することです。理由はわかりません。試したことはすべてうまくいきません。どんなアイデアでも大歓迎です！

HTML+JS:

<div class="navbar">
    <div class="navbar-inner">
    <a class="brand" href="#"><img src="images/logo2.png" class="logo" alt="header    logo"></a>
    <?php include 'socialbtn.php';?>
    <div class="test">
    <ul class="nav">
    <!--<li class="active">-->
    <li><a id="index_link" href="index.php">Home</a></li>
    <li><a id="therapist_link" href="therapist_profile.php">Therapist Profile</a></li>
    <li><a href="services.php">Services & Prices</a></li>
    <li><a href="testimonials.php">Testimonials</a></li>
    <li><a href="contact.php">Contact Me</a></li>
    <li><a href="blog.php">Blog</a></li>
    <li><a href="raceready.php">Race Ready?</a></li>
    <li><a href="treatment.php">What We Treat</a></li>
    <li><a href="expect.php">What To Expect</a></li>

       </ul>
       </div>
</div>
</div>       

<script type="text/javascript">
       jQuery(function(){
        var menuOffset = jQuery('.test')[0].offsetTop;
         jQuery(document).bind('ready scroll',function() {
         var docScroll = jQuery(document).scrollTop();
        if(docScroll >= menuOffset +170) {
       jQuery('.test').addClass('fixed');
         } else {
        jQuery('.test').removeClass('fixed').removeAttr("width");
         }
             });
                }); 

       </script>

CSS:

.test {

} 

.test.fixed{
width: 930px;
position: fixed;
z-index: 9999;
top:0;
display:block;
min-height: 50px;
padding-right: 10px;
padding-left: 10px;
background-color: #2c3e50;
background-image: -moz-linear-gradient(top, #2c3e50, #2c3e50);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2c3e50), to(#2c3e50));
background-image: -webkit-linear-gradient(top, #2c3e50, #2c3e50);
background-image: -o-linear-gradient(top, #2c3e50, #2c3e50);
background-image: linear-gradient(to bottom, #2c3e50, #2c3e50);
background-repeat: repeat-x;
border: 1px solid #233140;
-webkit-border-radius: 6px;
 -moz-border-radius: 6px;
      border-radius: 6px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2c3e50', endColorstr='#ff2c3e50', GradientType=0);
*zoom: 1;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);

}

私のコードは最高ではなく、おそらくここには冗長なものがあることを理解しましたが、店中から断片を取っているだけです。

4

3 に答える 3

1

「固定」配置を使用する際の問題は、要素がフローから外れることです。したがって、あたかも親がないかのように見えるため、親に対して再配置することはできません。ただし、コンテナの幅が固定されている場合は、次のようなものを使用できます。

.test.fixed { left: 50%;
              width: 916px;
              margin-left: -470px;
            }

パディングが含まれているため幅 916px を指定しましたが、コンテナーの幅は 940px です。したがって、margin-left は要素の幅のちょうど半分です。

于 2013-07-25T10:54:47.483 に答える
0

デバッガーからのようです

「navbar-inner」には、左右に 10px のパディングがあります。これにより、「テスト」クラスは 10px 離れた位置を取得します。

- 'navbar-inner' クラスからパディングを削除する - または (-) margin-left を test.fixed に追加し、それに応じて配置する必要があります。

于 2013-07-25T11:01:54.813 に答える
0

問題は、.navbar-inner(ちなみに ID である必要があります) が水平方向のパディングを追加することです。これは、ナビゲーション バーを固定したときに表示されます。最もクリーンな解決策は、おそらく、その要素によって追加されたパディングを、次のように、パディングを追加する必要がある要素のみをラップする子要素に移動することです。

<div class='navbar-innner'>
  <div class='navbar-spaced'>
  </div>
</div>

または、スペースを空ける必要があるmargin-left個々の要素に s を追加します。

于 2013-07-25T10:55:30.310 に答える