twitter Bootstrap Scrollspy highlight final final element

Buduję pojedynczą stronę internetową z nawigacją po pasku górnym, łączącą różne sekcje na stronie. Połączyłem go, używając Scrollspy jako <body data-spy="scroll" data-offset="50" id="home">. To działa świetnie. Każda sekcja jest podświetlona w nawigacji.twitter Bootstrap Scrollspy highlight final final element

Problem leży w końcowej sekcji. Ponieważ jest to krótka sekcja i nie wypełnia całej strony, nigdy nie zostanie osiągnięty, dlatego element nawigacyjny nie jest podświetlony.

Zauważyłem, że na bootstrap examples page po osiągnięciu końcowy element jest zaznaczony przed jego id zostanie osiągnięty - jeszcze id jest w górnej części, tak jak wszystkie inne sekcje.

Przeglądam niestandardowy plik application.js, ale nie widzę niczego związanego z zachowaniem scrollspy.

Czy ktoś może rzucić na nią jakiekolwiek światło?

Źródło

2012-03-23 deadlyhifi

Po prostu szukałem odpowiedzi na to pytanie. Strona demo bootstrap zdecydowanie robiła coś innego niż moja strona, gdy przychodziła do ostatniego przedmiotu. Również przeglądałem plik application.js, ale nic nie widziałem. W końcu zdecydowałem się porównać ich wersję scrollspy.js i moja. Używają v2.0.4, a ja mam wersję 2.0. Wymieniłem wersję na nową i zaczęło działać zgodnie z oczekiwaniami.

Następnie odniosłem się do dziennika zmian i dowiedziałem się, że v2.0.3 został wydany 24 kwietnia 2012. Jedna z wymienionych zmian: "Zawsze wybieraj ostatni element w scrollspy, jeśli dotarłeś do dolnej części dokumentu lub element".

Sądzę, że po cichu naprawili to wewnętrznie, ponieważ pobrałem bootstrap. Być może już to wymyśliłeś, ale mam nadzieję, że pomoże to innym w szukaniu tej samej odpowiedzi.

Źródło

2012-06-04 20:06:43 Jon

Cześć Jon, nie, nie rozumiem tego. Po prostu eksperymentowałem i padłem z drogi. Masz jednak odpowiedź, dziękując za wskazanie tego, z chęcią wykorzystam to w projekcie w przyszłości. – deadlyhifi

Wystarczy zwiększyć atrybut data-offset do czegoś większego jak 500, tak:

<body data-spy="scroll" data-offset="500" id="home">

ładowania początkowego demo działa dobrze, ponieważ jest także potrącenie wysokość subnav, wraz z 50px offsetu, która jest podana na atrybut danych.

Źródło

2012-03-23 15:26:28

Dzięki za reakcję - uważam, że są tu nieco wyższe siły niż tylko przesunięcie danych. Ostatnia sekcja na przykładzie twittera zdecydowanie zachowuje się inaczej. Ponadto zwiększenie przesunięcia w moim przykładzie powoduje problemy, jeśli istnieją mniejsze sekcje (przykład zaktualizowany). – deadlyhifi

@deadlyhifi Twoje demo działa dobrze dla mnie, ja również wyeksportowałem go do jsfiddle i działa tam dobrze z przesunięciem danych 500, http://jsfiddle.net/andresilich/cBPgB/5/show/ –

Dzięki za patrząc na to - demo nie jest w porządku. Jeśli masz pełną szerokość przeglądarki i klikniesz "Cheesehead", przejdziesz do tej sekcji, ale podświetlony element to "Kontakt". Na przykładzie twittera ostatnia sekcja zdecydowanie zachowuje się inaczej niż pozostałe sekcje. – deadlyhifi

Mam obejście. W wierszu 40 usługi JS z przewijanym wątkiem zobaczysz:

this.process()

Po prostu usuń. To uruchamia metodę procesu w sprytnej próbie uruchomienia. Ale to jest przetwarzane, gdy przewijasz tak czy inaczej, więc po prostu go usuń i powinieneś być dobry.

Źródło

2012-08-13 17:19:47

W moim przypadku działa to tylko wtedy, gdy ustawi przewijany kontener danych na element <body>.

używam płynnego przewijania skrypt połączoną z nim i działa świetnie:

$('.sub-nav-collapse .nav li a').live('click',function(event) { 
    event.preventDefault(); 
    $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top-70}, 500); 
});

nadzieję, że ktoś pomoże!

Pozdrawiam!

Źródło

2012-09-02 12:13:11 Feco

Dla niektórych ten problem może być spowodowany problemami typu DOCTYPE/DOCTYPE. Jeśli twój obszar przewijania znajduje się na ciele, to scrollspy obliczy wysokość wzniesienia poza obiektem okna. Jeśli używasz jQuery 1.8.2 i nie masz odpowiedniego zestawu DOCTYPE, a następnie obliczenie scrollspy dla wysokości rzutni zwróci całkowitą wysokość powodującą, że zawsze będzie wybrany ostatni element.

Jeśli przełączysz się z powrotem do wersji jQuery 1.7.2, tak jak na http://twitter.github.com/bootstrap/javascript.html, to znów będzie działać, lub możesz ustawić odpowiedni DOCTYPE.

Oto więcej informacji na temat "notabug" numerze: http://bugs.jquery.com/ticket/12426

Źródło

2012-10-12 21:40:34

Dziękuję, to naprawiło mój problem ... nie wiem, jak zostawiłem doctype off doh! –

Dodawanie zamiast starszego pomógł mi! – Jonauz

+1 '' rozwiązało problem – TheBronx

jQuery 1.8.3 oraz DOCTYPE HTML5, uważam, że posiadanie rzutni początkowej skali od 1 spowodował scrollspy na niepowodzenie:

<meta name="viewport" content="width=device-width, initial-scale=1">

Usunąłem odwołanie do początkowej skali = 1 i scrollspy zaczął działać.

Źródło

2012-12-27 19:00:22 TomorrowPlusX

Dodanie maksymalnej skali = 1 do meta widoku naprawiło problem dla mnie. – juddlyon

Dodawanie deklaracji DOCTYPE HTML do góry strony ustalone to dla mnie:

<!DOCTYPE html>

Źródło

2016-04-01 05:46:54 Curt

Szalony, to doprowadzało mnie do muru. Dzięki! – yoshyosh

nigdy bym tego nie odgadł, dziękuję bardzo – 24x7

Znalazłem to pytanie szuka rozwiązania dla mojego problemu. Scrollspy działał poprawnie, aż osiągnął ostatnie 4 sekcje. Kiedy to się stało, natychmiast podskoczył do ostatnich sekcji unikając 3 innych na swojej drodze. Było to spowodowane względnie niewielkimi rozmiarami tych sekcji. Dzięki odpowiedź Jona postanowiłem zbadać scrollspy skrypt i znalazłem następujące wiersze:

if (scrollTop >= maxScroll) { 
    return activeTarget != (i = targets.last()[0]) 
    && this.activate (i) 
}

Są one odpowiedzialne, aby wybrać ostatnią sekcję, jeśli zostanie osiągnięty koniec strony. Komentowanie ich może pomóc w takich przypadkach jak moje (przeskakiwanie 3 sekcji jednocześnie), ale uniemożliwia dotarcie do ostatniej sekcji, jeśli jest małe.

Źródło

2016-04-11 12:35:21 Marta

twitter Bootstrap Scrollspy highlight final final element

Odpowiedz

Powiązane problemy