Twitter bootstrap affix z infinitescroll i window.resize

Question

Po przeczytaniu kilku powiązanych pytań na ten temat zdaję sobie sprawę, że w ogóle nie ma metody $.affix('refresh') dla składnika affix bootstrap - mój problem, choć powiązany, może być nawet dodatkowym krokiem pomiędzy odświeżeniem, pozwól mi spróbować wyjaśnić.

Mam stronę ze standardowym paskiem początkowym bootstrap. poniżej umieszczę pod-nawigację, która "wtyka", gdy użytkownik przewinie przez piksele x (w moim przypadku pasek nawigacyjny ma wysokość 41 pikseli, więc przy 41 pikselach kopie z przymocowaniem i przez zmianę klasy .affix na .affix {top:41px} wszystko jest dobrze)

Tak więc dla tego pierwszego atrybutu mogę używać atrybutów tylko html.

W dalszej części strony (może to być zasadniczo "druga strona") mam kolejny element nawigacji, który powinien "przymocować" i zamienić pierwszą podnakawę, gdy użytkownik przewinie do określonej pozycji - biorąc pod uwagę, że lokalizacja drugiej strony/załącznika jest zmienna ze względu na zawartość Używam js do obliczenia wysokości pierwszej strony i ustawienia offset: {top:xxx} w zależności od tego, co otrzymuję.

Działa to również świetnie/zgodnie z oczekiwaniami, gdy użytkownik przewija w dół, pierwszy podskok załatwia kopie, jeśli przewija dalej i dociera do drugiej podprzestrzeni dalej w dół strony, którą kopie i zastępuje pierwszy affix'ed sub-nav (to faktycznie nie zastępuje go per se, ale raczej nakładki z wyższą z-index)

Od tego mam dwa problemy, które nie były w stanie znaleźć rozwiązanie dla:

1. gdy użytkownik ponownie zmieni rozmiar okna, zawartość pierwszej strony wydłuży się oczywiście, co spowoduje zmianę moich oryginalnych wymiarów wierzchołka dla umieszczenia w dół strony. Najpierw myślałem, że proste połączenie z .affix('refresh') mogłoby/mogłoby być rozwiązaniem, ale oczywiście ta metoda nie jest nawet dostępna w komponencie. Następnie pomyślałem, że mogę ręcznie ponownie obliczyć wysokość i ponownie utworzyć $('.my-second-affix').affix({offset: {top:x-new-offset}}); - ALE z jakiegoś powodu to nie działa w ogóle i nie mogę zrozumieć, dlaczego :(

2. następny numer aby poradzić sobie z tym problemem, używam jquery infinitescroll, aby załadować coraz więcej stron ... każda strona może mieć inne pod-granice na różnych etapach, które chciałbym umieścić i zastąpić, które ostatnio dodane są teraz na górze .

Uwaga bym wtedy również, aby upewnić się, że jeśli użytkownik przewija kopię w innym kierunku, że wcześniej umieszczone sub-navs będzie ponownie przyrostka themse lves going backwards (co do którego podejrzewam, że będzie w porządku, o ile przesunięcia w poprawkach są poprawne)

Mam nadzieję, że to wyjaśnienie wystarczy, aby podkreślić mój problem, a ktoś albo już to załatwił, albo może zaoferować wskazówki dotyczące rozwiązania . Próbowałem, aby offset był funkcją, która zwraca bieżące przesunięcie od góry (jak wspomniano w innym pytaniu Twitter bootstrap change affix offset), ale z jakiegoś powodu, który nie działa zgodnie z oczekiwaniami.

Każda pomoc jest mile widziana

Answer 1

Czy próbowałeś $('#myAffix').affix('checkPosition'). Jest to dostępne w Bootstrap3.0

Answer 2

Jeśli dobrze zrozumiałem, będziesz musiał obliczyć przesunięcie przy zmianie rozmiaru. Ten przykład przy użyciu jQuery coś takiego:

$(window).resize(calcOffset); 

    function calcOffset() 
     { 
      var location = $("myElement").offset(); 
      var top = location.top; 
     } 

Answer 3

będę cię zaleca się stosowanie offsetu w kodzie samego jak ten <div class="col-md-offset-6">. Nadzieję, że to pomocny

Answer 4

To pytanie jest dość stary, ale ponieważ nikt nie odpowiedział na to ...

miałem podobny problem z przydomkiem. Oto jak to rozwiązałem.

$('.affixed-elements').each(function() { 
    var topOffset = 0; //calculate your top offset here 
    var $container = //Set this to the element's container; 
    $(this).affix({ 
     offset: { 
     top: function() { 
      return $container.offset().top - topOffset; 
     }, 
     bottom: function() { 
      return $('body').height() - ($container.offset().top+$container.outerHeight()); 
     } 
     } 
    }); 
}); 

Ustawienia te powinny utrzymywać przymocowany element w granicach jego kontenera nawet po zmianie rozmiaru okna.