問題與固定標題對齊

我正在爲朋友建立一個網站，並且我剛剛實現了一個固定標題。問題與固定標題對齊

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); 

}

我很感激我的代碼是不是最好的，在這裏可能有些多餘的東西，但我只是把點點滴滴，從遍佈整個商店。

來源

2013-07-25 slackai

您的鏈接不工作？ – putvande

您的網站已關閉。 – nstCactus

你可以在jsfiddle中重現這個嗎？ – Vishwanath

使用「固定」定位的問題是它將流出的元素取出。因此它不能相對於其父母重新定位，因爲它好像它沒有一個。因爲它包含了一些填充但容器寬度爲940px

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

我已經給了寬916px：但是，如果容器是固定的，已知的寬度，你可以使用類似。所以餘量僅爲元素寬度的一半。

來源

2013-07-25 10:54:47 user2618352

完美！非常感謝！ – slackai

問題是，你的.navbar-inner（應該是一個ID），增加了水平填充，這是固定導航欄時可見的。最乾淨的解決方案可能會由該元素添加填充進入該包僅需要填充添加到，像這樣的元素的子元素：

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

或者添加margin-left S到各元素你做需要空間。

來源

2013-07-25 10:55:30

從調試器似乎

「Navbar的內部」有10px的左側和右側都填充。由此，'測試'課獲得10px的位置。

你要麼需要： - 從「導航欄，內部」類中刪除填充 - 或增加（ - ）利潤率左到test.fixed並相應地安排它

來源

2013-07-25 11:01:54

問題與固定標題對齊

回答

相關問題