在滾動時創建粘性標題，固定位置會破壞標題

我在滾動時製作一個粘性標題，所以當標題欄到達頁面頂部時，它將粘在那裏。我遇到的問題是需要固定的位置，以使其緊貼頁面頂部。在滾動時創建粘性標題，固定位置會破壞標題

當我將位置固定到標題時，當它需要變粘時，它會從我希望它保持其當前形式的包裝中溢出，並且只是堅持頂端，我玩過很多不同的方式爲此編碼並沒有找到解決方案。

請明白我的意思是，當你滾動此頁上：http://cameras.specced.co.uk/compare/297/Fujifilm_FinePix_XP80 （帶紅色邊框的格是我要堅持到頂部什麼）

HTML：

<!-- FIXED HEADER --> 
<div class="container"> 
    <div class="row"> 
     <div class="compare1_fixed"> 
      <div class="compare1_fixed_score"> 
      </div> 
      <div class="compare1_fixed_name"> 
       <?php echo $brand['brand'] . " " . $model['model'] . " " . "Specifications"; ?> 
      </div> 
      <div class="compare1_fixed_social"> 
       <div class="compare1_fixed_social_icon"> 
        <a href="http://google.com"> 
         <img src="http://specced.co.uk/images/ui/facebook.png"> 
        </a> 
        <a href="http://google.com"> 
         <img src="http://specced.co.uk/images/ui/twitter.png"> 
        </a> 
        <a href="http://google.com"> 
         <img src="http://specced.co.uk/images/ui/google.png"> 
        </a> 
        <a href="http://google.com"> 
         <img src="http://specced.co.uk/images/ui/email.png"> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.compare1_fixed { 
    width:100%; 
    height:50px; 
    clear: both; 
    border:1px solid red; 
} 

. compare1_fixed_fixed { 
    position:fixed; 
} 

.compare1_fixed_score { 
    width:200px; 
    height:50px; 
    float: left; 
    background-color:#222222; 
} 

.compare1_fixed_social { 
    width:200px; 
    height:50px; 
    float:right; 
} 

.compare1_fixed_social_icon { 
    display: inline-block; 
} 

.compare1_fixed_social_icon img { 
    max-height: 50px; 
    max-width: 50px; 
    float: left; 
} 
.compare1_fixed_social_icon img:hover { 
    opacity:.7; 
} 


.compare1_fixed_name { 
    width:calc(100% - 400px); 
    height:50px; 
    display: inline-block; 
    line-height: 50px; 
    font-size:18px; 
    font-weight: 600; 
    padding-left:10px; 
}

JS：

/* STICKY HEADER */ 
$(document).ready(function() { 

    $(window).scroll(function() { 

     console.log($(window).scrollTop()) 
    if ($(window).scrollTop() > 200) { 
     $('.compare1_fixed').addClass('compare1_fixed_fixed'); 
    } 
    if ($(window).scrollTop() < 201) { 
     $('.compare1_fixed_fixed').removeClass('compare1_fixed_fixed'); 
    } 
    }); 
});

來源

2017-07-14 cousbrad

你可能想在裏面添加的z-index保持它高於一切。 – Icewine

請看你的網站，儘管紅色邊框溢出 – cousbrad

位置修正將使元素佔據整個頁面寬度，

修改CSS相應

.compare1_fixed_fixed { 
     position: fixed; 
     top: 50px; 
     width: 87%; 
     z-index: 5; 
     background-color: #fff; 
    }

希望這有助於..

來源

2017-07-14 07:25:42

在滾動時創建粘性標題，固定位置會破壞標題

回答

相關問題