Bootstrap, zachować div ustalona po przewinięciu do niej

Question

Używam Bootstrap i mają prostą stronę here

Jeśli kliknij zielony przycisk „GO” i przejdź na dół strony, więcej rekordy są załadowane. Chciałem, aby reklama w kolumnie po prawej stronie była np. "przykleić" do 10 px od góry strony, gdy przewinąłem stronę i osiągnąłem element div reklamy.

Jak widać, zamiast tego pozostaje w połowie strony.

mam to jako HTML do 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> 

Zastanawiałem się, czy istnieje sposób, aby to zrobić, co próbuję zrobić, ponieważ jestem trochę zakleszczony?

Dzięki

Answer 1

Zgodnie Bootstrap docs, trzeba napisać .affix, .affix-top i .affix-bottom samodzielnie style.

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

Aby określić, gdzie zaczyna się umieszcza można użyć atrybutu data-offset-* na elemencie:

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

Edit: Zrobiłem szybkie JSFiddle aby lepiej zilustrować zastosowanie.

Answer 2

z bootstrap i jQuery

$(document).ready(function(){ 
 
\t // bind and scroll header div 
 
\t $(window).bind('resize', function(e){ 
 
\t \t $(".affix").css('width',$(".container-fluid").width()); 
 
\t }); 
 
\t $(window).on("scroll", function() { 
 
\t \t $(".affix").css('width',$(".container-fluid").width()); 
 
\t }); 
 
});

.affix { 
 
    top:50px; 
 
    position: fixed; 
 
    \t width: 100%; 
 
\t background-color:white; 
 
\t 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"> 
 
\t <div class="header_for_fix" > 
 
\t \t <div>First</div> 
 
\t \t <div>Second</div> 
 
\t \t <div>Third</div> 
 
\t </div> 
 
</div> 
 
</div>