J'utilise Bootstrap et j'ai une simple page ici
Si vous cliquez sur le bouton vert "Aller" et faites défiler la page, d'autres enregistrements sont chargés. Je voulais par exemple que l’annonce se trouve dans la colonne de droite. "coller" à 10 px du haut de la page une fois que j'ai fait défiler la page et atteint le div de la publicité.
Comme vous pouvez le constater, il reste à la moitié de la page.
J'ai ceci comme HTML pour la div:
<div class="col-md-3">
<div data-spy="affix">
<script type="text/javascript">
.. advert
<a href="#" class="back-to-top">Back to Top</a>
</div>
</div>
Je me demandais s'il y avait un moyen de le faire faire ce que j'essaye de faire, car je suis un peu coincé?
Merci
Veuillez noter que la affix
est supprimée de bootstrap comme mentionné ici . À compter de 2018, je vous suggère également d'éviter jQuery et de passer à angular, react ou view. Pour de meilleures pratiques de codage.
Pour que cela se produise à partir de bootstrap 4.0, vous devez utiliser la classe sticky-top
.
Exemple de code:
<div class="card sticky-top">
...Something
</div>
Et ça ressemble à ça:
Si vous voulez du padding et de la marge, vous pouvez le configurer ou ajouter un autre div avec la même classe, etc. Soyez créatif :)
Selon Documents Bootstrap , vous devez écrire vous-même les styles .affix
, .affix-top
et .affix-bottom
.
.affix {
top:50px;
position:fixed;
}
Pour définir le début de l'affixe, vous pouvez utiliser un attribut data-offset-*
sur l'élément:
<div data-spy="affix" data-offset-top="50">
Edit: J'ai fait un rapide JSFiddle pour mieux illustrer l'utilisation.
avec bootstrap et jQuery
$(document).ready(function(){
// bind and scroll header div
$(window).bind('resize', function(e){
$(".affix").css('width',$(".container-fluid" ).width());
});
$(window).on("scroll", function() {
$(".affix").css('width',$(".container-fluid" ).width());
});
});
.affix {
top:50px;
position: fixed;
width: 100%;
background-color:white;
z-index:777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='container-fluid'>
<div data-spy="affix" data-offset-top="50">
<div class="header_for_fix" >
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
</div>
</div>
$(document).ready(function(){
// bind and scroll header div
$(window).bind('resize', function(e){
$(".affix").css('width',$(".container-fluid" ).width());
});
$(window).on("scroll", function() {
$(".affix").css('width',$(".container-fluid" ).width());
});
});
.affix {
top:50px;
position: fixed;
width: 100%;
background-color:white;
z-index:777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='container-fluid'>
<div data-spy="affix" data-offset-top="50">
<div class="header_for_fix" >
<div>First</div>
<div>Second</div>
<div>Third</div>
</div>
</div>
</div>