Jak zrobić aby top bar nie pokazywał się podczas scrollowania w górę?

  • xenorakii

    (@xenorakii)


    5 years, 8 months temu

    Witam,
    Używam motywu Zillah i zauważyłem, że mój top bar podczas scrollowania w dół się chowa, natomiast kiedy scrolluje w górę znowu się pojawia. Głównie zależałoby mi aby pokazywał się on cały czas niezależnie od tego czy scrolluję w górę czy w dół. Zacząłem szukać w edytprze worpdressa oraz edytować w trybie badania w przeglądarceaby znaleźć źródło problemu jednakże nie udało mi się po paru dobrych godzinach na nic wpaść. Jestem nowym użytkownikiem, który dopiero wkracza w teń świat.
    Macie jakieś sugestie? Czy powinienem jeszcze coś wspomnieć aby pomóc Wam pomóc mi? 😀 😀

    Pozdrawiam,
    Paweł

    Strona przy której potrzebuję pomocy: [zaloguj się aby zobaczyć ten link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Magda

    (@prodesignerpl)

    5 years, 8 months temu

    Zrob tak 🙂 – wejdz w plik functions.js – tam znajdziesz kod:

    (function($,window) {

    var headerHeight,
        isAdminBar,
        lastScrollTop       = 0,
        initTop             = 0,
        changeDirection     = false,
        lastDirectionDown   = false;
    var $headerToHide       = $( '.header-inner-top' );

    /**
     * Handle header resize.
     */
    $.zillah = {
        initTop: 0,

        'init': function () {
        	isAdminBar = $('#wpadminbar').length > 0;
            this.setBodyPadding();
            this.handleWindowResize();
            if( window.innerWidth >= 992 ) {
            	this.handleScroll();
			}
        },

        'setBodyPadding': function () {
            if (window.innerWidth >= 992) {
                headerHeight = $( '.header-inner-top' ).height();
                initTop = isAdminBar && window.innerWidth > 768 ? 32 : 0;
            }
            $( 'body' ).css('padding-top', headerHeight);
        },

        'handleWindowResize': function () {
            $(window).resize(function () {
                var headerHeight = $( '.header-inner-top' ).height();
                initTop = isAdminBar && window.innerWidth > 992 ? 32 : 0;
                $( 'body' ).css( 'padding-top', window.innerWidth > 992 ? headerHeight : 0 );
            });
        },

		'handleScroll': function () {
            $(window).scroll(function () {
                var thisScrollTop = $(this).scrollTop();
                changeDirection = ( thisScrollTop > headerHeight && (thisScrollTop > lastScrollTop && lastDirectionDown === false) || (thisScrollTop < lastScrollTop && lastDirectionDown === true) );
                if (changeDirection === true) {
                    $headerToHide.toggleClass('hide-header');
                    lastDirectionDown = ( lastDirectionDown === false );
                }
                $headerToHide.css( {
                    'top': $headerToHide.hasClass('hide-header') ? (-1) * headerHeight : initTop
                } );
                lastScrollTop = thisScrollTop;
            });
        }
    };
    $.zillah.init();

    skasuj go a najlepiej skomentuj //
    ustaw w css .header-inner-top w css position:fixed i prawdopodobnie będzie po sprawie.
    Zauważyłam również iż masz aż 3 linki do fontawesome 🙂 – musisz co najmniej 2 skasować 🙂
    Pozdrawiam

    Thread Starter xenorakii

    (@xenorakii)

    5 years, 8 months temu

    Dziękuję bardzo! Działa! 😀 Teraz będę chcieć jeszcze zrobić go sticky całościowo, ale to pobawię się w najbliższym czasie i pewnie jeśli nie będzie mi szło to jeszcze napiszę 🙂

    Chciałbym dopytać się jeszcze teraz o to Fontawesome. O co chodzi dokładnie? Nie mam pojęcia co to jest oraz gdzie znaleźć te linki.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Temat ‘Jak zrobić aby top bar nie pokazywał się podczas scrollowania w górę?’ jest zamknięty na nowe odpowiedzi.