在滚动时创建粘性标题，固定位置会破坏标题

我在滚动时制作一个粘性标题，所以当标题栏到达页面顶部时，它将粘在那里。我遇到的问题是需要固定的位置，以使其紧贴页面顶部。在滚动时创建粘性标题，固定位置会破坏标题

当我将位置固定到标题时，当它需要变粘时，它会从我希望它保持其当前形式的包装中溢出，并且只是坚持顶端，我玩过很多不同的方式为此编码并没有找到解决方案。

请明白我的意思是，当你滚动此页上：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

在滚动时创建粘性标题，固定位置会破坏标题

回答

相关问题