Tworzenie pływającym barem, takich jak Gmail i Facebook

Dowiedz się, jak stworzyć pływający pasek na ciebie ci stron internetowych takich jak Gmail i Facebook. Ten pasek będzie unosić się, gdy użytkownik będzie przewijać stronę. Technika ta wykorzystuje jQuery.

A+ A-

Obecnie korzystanie z pływającymi barami jest powszechne w projektach internetowych. O ile pamiętam, Google i Facebook byli pierwszymi wśród czołowych stronach internetowych, aby używali takiego pływającego baru. Jeśli zastanawiasz się, co to pływający bar, dobrze, to jest w zasadzie element DIV, który pozostaje st stałej pozycji przez cały czas. Nawet jeśli odwiedzający przewija stronę, pasek pływający pozostaje stała. To pomaga w zachowaniu stale pewną zawartość widzenia użytkownika.

Wiele osób pyta mnie o tym, jak stworzyć Facebook Like pływający bar. Chociaż jest to trochę nierówne ale technika bardzo przydatna w zachowaniu pewnej części strony zawsze przed oczami użytkownika.

Pływający pasek na bokach, u góry lub na dole

Jest to dość proste, jeśli chcesz stworzyć pływający bar, który dotyka dowolnej krawędzi ekranu, lewy, prawy, górny lub dolny. Wystarczy utworzyć pasek za pomocą elementu div i unosi go za pomocą position: fixed regułę CSS. Ponadto, można użyć rację: 0 i dno: 0 do umieszczenia na pasku. Na przykład:

.my-floating-bar{
position: fixed;
bottom: 0;
}

Ten kod CSS daje pływający pasek umieszczony na dolnej krawędzi ekranu.

Pływający bar w środku strony internetowej

Użyj następującej metody, jeśli część-do-płynął znajduje się gdzieś w środku strony internetowej i chcesz, aby pasek unosić tylko gdy użytkownik przewinie ekranie.

WAŻNE: Technika ta wykorzystuje jQuery. Twoja strona musi obejmować biblioteki jQuery przed użyciem tej techniki. WordPress i wielu innych CMS już przyjdzie ładowane z jQuery. Sprawdź dokumentację Ci blogowanie lub platformy CMS.

Jeśli Twoja strona nie posiada jQuery -paste następującą linię w sekcji HEAD strony internetowej w celu włączenia do biblioteki:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

Ten kod pobrane z biblioteki jQuery z serwerów Google i obciążenia w ramach swojej stronie internetowej.

Teraz oto kody do tworzenia płynął treści.

Kod HTML

<div id="my-float-container">
    <div id="my-float">
...content comes here...
    </div>
</div>

CSS

#my-float-container {
...define styles like width and height for container...
}

#my-float {
overflow: hidden;
z-index: 1;
...keep the above two styles and add more as need be...
}

#my-float.floating {
    position: fixed;
    top: 0;
    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.25);
}

Kod JavaScript

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() &gt; $('#my-float-container').offset().top)
            $('#my-float').addClass('floating');
        else
            $('#my-float').removeClass('floating');
    } );

} );

To jest to!

Ciesz treść pływających! Ale pozwól mi doradzić, aby nie wkładać AdSense w takich segmentach pływających -Bo to jest sprzeczne z polityką AdSense reklamy.

Mam nadzieję, że to był użyteczne dla was. Proszę nie wahaj się zapytać, jeśli masz jakiekolwiek pytania dotyczące tego tematu. Będę szczęśliwy, aby spróbować pomóc. Dziekujemy za korzystanie TechWelkin.