Chciałbym utworzyć div, który znajduje się pod blokiem treści, ale który po przewinięciu strony na tyle, by zetknąć się z górną granicą, zostaje ustalony i przewija się wraz ze stroną.
javascript
jquery
css
scroll
positioning
evanr
źródło
źródło
position: sticky; top:0;
działa w większości przeglądarek w styczniu 2017 r.position: sticky;
rzecz jest magiczna.Odpowiedzi:
Możesz użyć po prostu css, ustawiając swój element jako stały :
Edycja: Powinieneś mieć element z pozycją bezwzględną, gdy przesunięcie przewijania osiągnie element, należy go zmienić na stały, a górną pozycję należy ustawić na zero.
Możesz wykryć przesunięcie górnego przewijania dokumentu za pomocą funkcji scrollTop :
Kiedy przesunięcie przewijania osiągnie 200, element przyklei się do górnej części okna przeglądarki, ponieważ zostanie ustawiony jako stały.
źródło
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed') { $('.fixedElement').css({'position': 'static', 'top': '0px'}); }
new example
Link dałeś tyle czyste i jasne, że nie mogę nawet zobaczyć! -_-Widziałeś ten przykład na stronie problemu Google Code i (dopiero niedawno) na stronie edycji Przepełnienie stosu.
Odpowiedź CMS nie zmienia pozycji podczas przewijania w górę. Oto bezwstydnie skradziony kod z przepełnienia stosu:
I proste demo na żywo .
Powstająca alternatywa bez skryptów
position: sticky
jest obsługiwana w Chrome, Firefox i Safari. Zobacz artykuł na temat HTML5Rocks i wersji demo oraz dokumentów Mozilli .źródło
offset
musiał przestać akceptować obiekt jako dane wejściowe api.jquery.com/offset . @Eddie Twoja modyfikacja powinna być bezpieczna z obecnym jQuery.var d = $("#scroller-anchor").offset().top;
zvar d = $("#sidebar").offset().top;
i pozbyć się pustych-scroller kotwicy div wszystko razem? Oto mój widelec pokazujący, o czym mówię.Od stycznia 2017 r. I wydania Chrome 56 większość powszechnie używanych przeglądarek obsługuje tę
position: sticky
właściwość w CSS.robi to dla mnie w Firefoxie i Chrome.
W Safari nadal musisz korzystać
position: -webkit-sticky
.Wielokrotne wypełnianie jest dostępne dla Internet Explorera i Edge; https://github.com/wilddeer/stickyfill wydaje się być dobrym rozwiązaniem.
źródło
Miałem ten sam problem co ty i skończyłem z tworzeniem wtyczki jQuery, aby się tym zająć. W rzeczywistości rozwiązuje wszystkie problemy, które wymienili tutaj ludzie, a także dodaje kilka opcjonalnych funkcji.
Opcje
https://github.com/donnyv/sticky-panel
demo: http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm
źródło
code
// zdejmij panel node.css ({"margin": 0, "left": nodeLeft, "top": newNodeTop, "position": "fixed", "width": node.width ()});code
A oto jak bez jquery (AKTUALIZACJA: zobacz inne odpowiedzi, w których możesz to teraz zrobić tylko za pomocą CSS)
źródło
Tak to zrobiłem z jquery. Wszystko to zostało zebrane razem z różnych odpowiedzi na temat przepełnienia stosu. To rozwiązanie buforuje selektory w celu szybszego działania, a także rozwiązuje problem „skakania”, gdy lepki div staje się lepki.
Sprawdź to na jsfiddle: http://jsfiddle.net/HQS8s/
CSS:
JS:
źródło
Oto kolejna opcja:
JAVASCRIPT
Twój
#myElementToStick
powinien zacząćposition:absolute
własności CSS.źródło
Jak powiedzieli Josh Lee i Colin 't Hart , możesz opcjonalnie po prostu użyć
position: sticky; top: 0;
zastosowanie do div, którego chcesz przewijać w ...Ponadto jedyne, co musisz zrobić, to skopiować to na górę strony lub sformatować, aby zmieściło się w zewnętrznym arkuszu CSS:
Po prostu zamień
#sticky_div's_name_here
na nazwę swojej div, tzn. Jeśli div<div id="example">
byłby, wstawisz#example { position: sticky; top: 0; }
.źródło
Moje rozwiązanie jest trochę pełne, ale obsługuje zmienne pozycjonowanie od lewej krawędzi dla wyśrodkowanych układów.
źródło
Oto jeszcze jedna wersja do wypróbowania dla tych, którzy mają problemy z innymi. Łączy w sobie techniki omówione w tym zduplikowanym pytaniu i generuje wymagane DIV pomocnicze dynamicznie, więc nie jest wymagany dodatkowy HTML.
CSS:
JQuery:
Aby element był lepki, wykonaj:
Kiedy element staje się lepki, kod zarządza pozycją pozostałej zawartości, aby zapobiec przeskakiwaniu do szczeliny pozostawionej przez lepki element. Przywraca również element lepki do jego pierwotnej niekleistej pozycji podczas przewijania powyżej niego.
źródło
Oto rozszerzona wersja odpowiedzi Josha Lee. Jeśli chcesz, aby div znajdował się na pasku bocznym po prawej stronie i unosił się w zakresie (tzn. Musisz określić górną i dolną pozycję zakotwiczenia). Naprawia również błąd, gdy wyświetlasz to na urządzeniach mobilnych (musisz sprawdzić lewą pozycję przewijania, w przeciwnym razie div zniknie z ekranu).
źródło
Natknąłem się na to, szukając tego samego. Wiem, że to stare pytanie, ale pomyślałem, że zaoferuję bardziej aktualną odpowiedź.
Scrollorama ma funkcję „pin it”, której właśnie szukałem.
http://johnpolacek.github.io/scrollorama/
źródło
Informacje podane w celu udzielenia odpowiedzi na inne pytanie mogą być dla ciebie pomocne, Evan:
Sprawdź, czy element jest widoczny po przewinięciu
Zasadniczo chcesz zmodyfikować styl elementu, aby ustawić go na stały dopiero po sprawdzeniu, czy wartość document.body.scrollTop jest równa lub większa niż górna część elementu.
źródło
Akceptowana odpowiedź działa, ale nie wraca do poprzedniej pozycji, jeśli przewiniesz ją powyżej. Po umieszczeniu zawsze jest przyklejany do góry.
Odpowiedź Jleiediewa mogłaby zadziałać, ale nie byłem w stanie zmusić go do działania. Jego przykładowa strona również nie działała (dla mnie).
źródło
Możesz dodać 3 dodatkowe wiersze, więc gdy użytkownik przewinie z powrotem na górę, div pozostanie na swoim starym miejscu:
Oto kod:
źródło
Mam linki ustawione w div, więc jest to pionowa lista linków liter i cyfr.
Następnie ustawiam tę przydatną funkcję jQuery, aby zapisać załadowaną pozycję, a następnie zmieniam pozycję na stałą podczas przewijania poza tę pozycję.
UWAGA: działa to tylko wtedy, gdy linki są widoczne podczas ładowania strony !!
źródło
Wykorzystałem niektóre z powyższych prac, aby stworzyć tę technologię. Trochę go poprawiłem i pomyślałem, że podzielę się swoją pracą. Mam nadzieję że to pomoże.
Kod jsfuddle
Jest to nieco bardziej dynamiczny sposób przewijania. To wymaga trochę pracy i w pewnym momencie zmienię to w pluging, ale to właśnie wymyśliłem po godzinie pracy.
źródło
W javascript możesz:
źródło
Nie jest to dokładne rozwiązanie, ale świetna alternatywa do rozważenia
Ten CSS do góry paska przewijania ekranu . Rozwiązano cały problem z TYLKO CSS , BEZ JavaScript, BEZ JQuery, Bez pracy mózgu ( lol ).
Ciesz się moim skrzypkiem : D wszystkie kody są tam zawarte :)
CSS
Umieść treść wystarczająco długo, abyś mógł zobaczyć efekt tutaj :) Aha, i jest tam też referencja, ponieważ zasługuje na uznanie
TYLKO CSS Pasek przewijania na górze ekranu
źródło
Oto przykład, który używa wtyczki widocznej dla jquery: http://jsfiddle.net/711p4em4/ .
HTML:
CSS:
JS (zawiera wtyczkę widoczną dla jquery):
źródło
lepki, dopóki stopka nie dotknie div:
źródło