web-dev-qa-db-fra.com

Bootstrap, garde div fixe après le défilement

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

jqueryhtmlcsstwitter-bootstrap
13
4532066

Bootstrap 4.0+ mise à jour

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:

 enter image description here

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

8
Fangming

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.

14
cloying

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>

1
Vlad

$(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>

0
Hitesh