Naprawiono blok na pasku bocznym. Naprawiono górne menu i pływający pasek boczny w WordPress. Dwa lub więcej bloków jest ustalanych jeden po drugim

Jakie są wymagania dotyczące układu:

• Gumowy układ dwukolumnowy
• stała szerokość paska bocznego 300px
• zawartość jest rozciągana na całą pozostałą szerokość.
• stopka dociśnięta do dołu (w tej lekcji nie pokażę, jak to się robi).

Jeśli sprawisz, że bloki będą się unosić, musisz nadać im stałą szerokość (nie możesz ustawić 1 paska bocznego na 300px i zawartości na 100%).W takim przypadku albo zawartość przesunie się w dół, albo pojawi się poziome przewinięcie o 300px w lewo. Cóż, najważniejsze jest, aby zrozumieć, że ta metoda nam nie odpowiada.

Wielu projektantów układów oferuje tę metodę. O czym w ogóle myślą?! Istotą tej metody jest to, że możesz ustawić pasek boczny tak, aby miał szerokość 300, ale treść nie powinna być pływająca i nadać jej margines lewy:300px. Dobry sposób i wygląda na to, że wszystko układa się znakomicie. Szczerze mówiąc, myślałem, że to najlepszy sposób, ale ta metoda ma swoje pułapki. Powodem rezygnacji z tej metody jest to, że jeśli nagle w treści układamy np. menu z pływającymi li lub jakimikolwiek innymi blokami typu float, a następnie chcemy je wyczyścić za pomocą clear:obu, to dolna granica tego bloku zsuwa się do poziomu dolnej krawędzi belki bocznej (Co i nie jest to dziwne, skoro pianka jest wyczyszczona, można tego uniknąć, jeśli pływającemu blokowi zostanie nadana stała wysokość, ale zupełnie nie ma to miejsca w przypadku ustawienia stałej wysokość).

Możesz użyć pozycji bezwzględnej dla paska bocznego, ale tylko wtedy, gdy masz całkowitą pewność, że zawartość będzie większa niż wysokość paska bocznego, w przeciwnym razie cała zawartość paska bocznego wskoczy na stopkę (w końcu pozycjonowanie bezwzględne eliminuje ją z ogólny przepływ).

ale dla mnie to też nie jest dobry sposób!

"To doskonała metoda, jeśli są w niej jakieś braki, proszę o komentarz. Ale myślę, że to najlepszy sposób. "

• Zalety tej metody: po pierwsze, zawartość DOMe znajdzie się przed paskiem bocznym, co jest dobre dla wyszukiwarek.
• nic nie pasuje do stopki
• dowolne bloki można usunąć i nic nie zsunie się do dolnej krawędzi (w ten sposób pokonaliśmy problemy drugiej metody).

Ogólnie jak to działa: spójrz na kod, najpierw treść, potem pasek boczny. ustaw pływak dla tych dwóch bloków (naturalnie pasek boczny zsuwa się w dół). następnie ustawiamy właściwość margines-lewy paska bocznego: -100%. świetnie, wszystko wróciło na swoje miejsce i wcinamy treść za pomocą marginesu-lewego:300px.

Na stronie potrzebny jest blok pływający (lub jak to się nazywa ruchomy, nieruchomy, lepki) tak, aby użytkownik podczas przewijania strony widział jeden nieruchomy element, w którym najczęściej umieszczana jest reklama (teaser, baner lub kontekst). .

Niestety zasady AdSense zabraniają nam tego. Jednak wielu właścicieli witryn ignoruje te zasady na własne ryzyko. Być może nie są za to nawet karani, ale nie radzę podejmować ryzyka.

W takich blokach YAN umieszczam swoje teasery/banery i czasami zamiast reklamy je tam wyświetlam podobne posty lub jakieś informacje przydatne dla odwiedzającego.

Powiemy Ci, jak utworzyć pływający blok na swojej stronie internetowej.

Zadanie: spraw, aby ostatni blok w bocznej kolumnie (pasku bocznym) pływał. Co więcej, aby trzymał się tylko w momencie, gdy użytkownik dotrze do niego przewijając, a nie od razu podczas otwierania strony. Ponadto blok powinien „przyklejać się” do stopki (tzn. nie na nią nachodzić).

Istnieje wiele opcji implementacji bloku przyklejonego, ale nie wszystkie z nich działają poprawnie. Opowiem ci od osobiste doświadczenie: ten sam sposób montażu bloczka może działać w jednym miejscu, ale ościeża pojawią się w innym.

Poniżej znajduje się przykład pływającego bloku, który działał na prawie wszystkich stronach, w których go zainstalowałem. Nie było żadnych ościeży. Silnik też nie jest ważny (DLE, WordPress, LiveStreet itp.).

W żądanym miejscu w bocznej kolumnie wklej następujący kod HTML:

$(okno).scroll(funkcja() (
zmienna sb_m = 20 ; /* dopełnienie powyżej i poniżej */
zmienna mb = 300 ; / * wysokość piwnicy z marginesem */
var st = $(okno).scrollTop() ;
var sb = $(.lepki-blok" ) ;
var sbi = $(.blok samoprzylepny .wewnętrzny" ) ;
var sb_ot = sb.offset() .top;
var sbi_ot = sbi.offset() .top;
var sb_h = sb.height();

If(sb_h + $(dokument).scrollTop() + sb_m + mb< $(document) .height () ) {
if(st > sb_ot) (
var h = Math.round(st - sb_ot) + sb_m;
sb.css(("wypełnienie górne": h) ) ;
}
w przeciwnym razie(
sb.css(( "Wypełnienie górne": 0 ) ) ;
}
}
} ) ;

W tym kodzie możesz ustawić dopełnienie u góry, u dołu, a także wysokość stopki, tj. wysokość, na której blok musi się zatrzymać.

Teraz połączmy JS. W tym celu w sekcji HEAD napisz:

Również metoda niezawodna, ale poprzez zainstalowanie wtyczki. Działa bez ościeży.

Zalety:

• nie trzeba rozumieć/rozumieć HTML;
• prostota i szybkość montażu.

Wady:

Jak używać:

Wydawały mi się mniej wygodne i nie tak jasne jak dwie powyższe metody. Ale i tak o nich opowiem.

Wstaw na pasek boczny:

Style piszemy w HTML (lepiej dodać je bezpośrednio do CSS):

.lepki(
pozycja: stała;
indeks Z: 101 ;
}
.zatrzymywać się(
pozycja: względna;
indeks Z: 101 ;
}

Teraz dodajemy sam skrypt na stronę (lepiej go umieścić osobny plik, jak w „Najbardziej działająca metoda”):

(funkcja() (
var a = document.querySelector("#aside1" ) , b = null, P = 0 ; // jeśli zero zostanie zastąpione liczbą, blok zostanie przyklejony, zanim górna krawędź okna przeglądarki dotrze do górnej krawędzi elementu. Może być liczbą ujemną
window.addEventListener("przewiń" , Ascroll, false) ;
document.body.addEventListener("scroll" , Ascroll, false) ;
funkcja Ascroll() (
if (b == null) (
var Sa = getComputedStyle(a, "" ) , s = "" ;
for (var i = 0 ; tj< Sa.length; i++) {
if (Sa[ i].indexOf("rozmiar pudełka" ) == 0 || Sa[ i].indexOf("przepełnienie" ) == 0 || Sa[ i].indexOf("szerokość" ) == 0 || Sa[ i].indexOf("wypełnienie" ) == 0 || Sa[ i].indexOf("border" ) == 0 || Sa[ i].indexOf("konspekt" ) == 0 || Sa[ i].indexOf("cień pudełka" ) == 0 || Sa[ i].indexOf("tło" ) == 0 ) (
s += Sa[ i] + ": " +Sa.getPropertyValue(Sa[ i] ) + "; "
}
}
a.innerHTML = "" +a.innerHTML+"" ;
b = a.dzieci[ 0 ] ;
a.style .height = b.getBoundingClientRect() .height + "px" ;
a.style .padding = "0" ;
a.style .border = "0" ;
}
var Ra = a.getBoundingClientRect() ,
R = Math.round(Ra.top + b.getBoundingClientRect() .height - document.querySelector("footer" ) .getBoundingClientRect() .top + 0 ) ; // selektor bloku, po dotarciu do górnej krawędzi którego należy odpiąć przyklejony element; Math.round() jest przeznaczona tylko dla IE; jeśli zero zostanie zastąpione liczbą, wówczas bloczek przyklei się, zanim dolna krawędź elementu dotrze do stopki
if ((Ra.top - P) Jak zrobić blok (div, side, itp.), naprawiono nagłówek, reklamę, menu. Tylko CSS #aside1 ( /* blok, który pozostanie na miejscu */ pozycja: stała; indeks Z: 101; )

Właściwie w większości przypadków: pływające przyciski portale społecznościowe, liczniki, nie wymaga skryptu.

Oznacza to, że element z linkami (lub czymkolwiek) znajduje się daleko od początku strony. Załóżmy, że duży nagłówek lub kolumna boczna zawiera wiele przydatnych rzeczy, takich jak wyszukiwanie, kategorie itp. Gdy podczas przewijania góra okna przeglądarki dotknie górnej krawędzi elementu, przykleja się i „przesuwa” w dół, aż do końca strony.