wake-up-neo.net

Bootstrap, halte div nach dem Scrollen dorthin

Ich benutze Bootstrap und habe eine einfache Seite hier

Wenn Sie auf die grüne Schaltfläche "Los" klicken und die Seite nach unten scrollen, werden weitere Datensätze geladen. Ich wollte, dass die Anzeige in der rechten Spalte z. "Stick" auf 10 px vom oberen Rand der Seite, sobald ich auf der Seite nach unten scrollen und die Anzeige div erreicht habe.

Wie Sie sehen, bleibt es stattdessen auf halber Höhe der Seite.

Ich habe dies als HTML für das 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>

Ich fragte mich, ob es einen Weg gibt, das zu erreichen, was ich versuche, da ich ein bisschen festgefahren bin?

Vielen Dank

13
4532066

Update für Bootstrap 4.0+

Bitte beachten Sie, dass die affix von bootstrap wie hier erwähnt entfernt wird. Ab 2018 empfehle ich Ihnen außerdem, jQuery zu vermeiden und zu Winkel, Reagieren oder Vue zu wechseln. Für bessere Codierverfahren.

Damit dies jetzt mit bootstrap 4.0 möglich wird, müssen Sie die Klasse sticky-top verwenden.

Beispielcode:

<div class="card sticky-top">
...Something
</div>

Und es sieht so aus:

 enter image description here

Wenn Sie etwas Füllung und Rand wünschen, können Sie dies einrichten oder ein weiteres Div mit derselben Klasse hinzufügen usw. Seien Sie kreativ :)

8
Fangming

Gemäß Bootstrap docs müssen Sie die Formate .affix, .affix-top und .affix-bottom selbst schreiben.

.affix {
    top:50px;
    position:fixed;
}

Um festzulegen, wo der Affix beginnt, können Sie ein data-offset-*-Attribut für das Element verwenden:

<div data-spy="affix" data-offset-top="50">

Edit: Ich habe ein schnelles JSFiddle gemacht, um die Verwendung besser zu veranschaulichen.

14
cloying

mit bootstrap und 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