Création d'un en-tête collant sur le défilement, la position fixe casse l'en-tête

Question

Je fais un en-tête collant sur le défilement de sorte que lorsque la barre d'en-tête arrive en haut de la page, il y reste. Le problème que j'ai est avec la position fixée qui est nécessaire pour le faire coller au haut de la page. Lorsque j'applique une position fixée sur l'en-tête quand il faut devenir collant, elle déborde de l'emballage où je veux qu'elle conserve sa forme actuelle et qu'elle colle simplement au sommet, j'ai joué de différentes manières pour coder cela et n'ont pas trouvé de solution.

S'il vous plaît voir ce que je veux dire quand vous faites défiler sur cette page: http://cameras.specced.co.uk/compare/297/Fujifilm_FinePix_XP80 (Le div avec la frontière rouge est ce que je veux rester au sommet)

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

Answer 1

Position fixe fera l'élément occuper largeur de la page,

Modifier votre CSS en conséquence

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

espérons que cette aide ..