Częste problemy innych użytkowników

Zapytaj w grupie na Facebooku

Porozmawiaj z nami na live-chat

Nie udało ci się znaleźć rozwiązania problemu?

Częste problemy innych użytkowników

Zapytaj w grupie na Facebooku

Porozmawiaj z nami na live-chat

Nie udało ci się znaleźć rozwiązania problemu?

Jeśli czytasz naszego bloga, być może zauważyłaś/eś, że obok listy wpisów znajduje się reklama WebWave, która zatrzymuje się podczas przewijania strony. Dokładnie taki sam efekt da się uzyskać, dodając krótki kod do swojej strony.

 

 

  1. Dodaj element html do strony.
     

  2. Na dodanym wcześniej elemencie html kliknij dwukrotnie.
     

  3. W nowo otwartym oknie podmień wpisany automatycznie kod na ten poniżej:
     

    <script type="text/javascript">
       
       var atScroll = @
       var elementsSelector = '#element_ID'; 
       
    (function(){
        function fixObject($object){
            if($object.hasClass('scrollFix') === false){
                $object.addClass('scrollFix');
                $object.css({
                    position: 'fixed',
                    top : '-='+atScroll,
                    marginLeft : $object.css('left'),
                    left: 'auto'
                });
            }
        }
       
        function unfixObject($object){
            if($object.hasClass('scrollFix') === true){
                $object.removeClass('scrollFix');
                $object.css({
                    position: '',
                    top : '',
                    marginLeft : '',
                    left: ''
                })
            }
        }
       
       
        $(document).ready(function(){
            var $elements = $(elementsSelector);
            $(window).on('scroll', function(){
                if(this.scrollY > atScroll){
                    $elements.each(function(){
                        fixObject($(this));
                    });
                } else {
                    $elements.each(function(){
                        unfixObject($(this));
                    });
                }
            });
        });
    }());
    </script>

     

  4. Jeśli jeszcze tego nie zrobiłaś/eś dodaj do strony elementy, które mają się zatrzymywać i opublikuj ją.
     

  5. Znajdź ID elementu który ma się zatrzymać. Jeśli nie wiesz jak to zrobić przeczytaj ten poradnik.
     

  6. W miejsce znaku "@" wpisz wysokość od początku strony, na jakiej ma się zatrzymać element. 
    Jeśli twoja strona posiada przypięte menu pamiętaj, żeby również dodać jego wysokość.
     

  7. W miejsce "ID" wpisz id elementu który ma się zatrzymać.
    Jeśli chcesz zatrzymać kilka elementów, dodaj je do kodu według wzoru:
    '#element_
    1, #element_2, #element_3, #element_4,'; 
     

  8. Zapisz zmiany i opublikuj stronę.

Zatrzymanie elementu podczas scrollowania

© Copyright 2017 by WebWave   |   Created by Adrian Bizewski

WebWave CMS - logo
Ta strona została stworzona za darmo w WebWave.
Ty też możesz stworzyć swoją darmową stronę www bez kodowania.