4.Affiliate konference na Slovensku, Bratislava 25.9.2018 posední volná místa
Zobrazují se odpovědi 1 až 5 z 5

Pomoc s úpravou jQuery kódy

  1. Ahoj,

    jelikož se jQuery teprve učím, a tak mé skills nedosahují nikterak převratných úrovní, chtěl bych poprosit o jednu radu.

    Chci si na jeden web aplikovat jQuery kód pro fixní navigaci, která se zobrazuje pouze při scrollu nahoru. Proto jsem si našel a upravil jeden kód. Nicméně, potřeboval bych, aby se tento kód aktivoval až po scrollnutí třeba 300px. Proč? Chci, aby header na první pohled při vstupu na web byl transparentní(position absolute), avšak aby při scrollování (position fixed), měl bílé pozadí.

    Kód:
    // Hide Header on on scroll down
    var didScroll;
    var lastScrollTop = 0;
    var delta = 5;
    var navbarHeight = jQuery('header').outerHeight();
    
    jQuery(window).scroll(function(event){
        didScroll = true;
    });
    
    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);
    
    function hasScrolled() {
        var st = jQuery(this).scrollTop();
        
        // Make sure they scroll more than delta
        if(Math.abs(lastScrollTop - st) <= delta)
            return;
        
        // If they scrolled down and are past the navbar, add class .nav-up.
        // This is necessary so you never see what is "behind" the navbar.
        if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down
            jQuery('header').removeClass('nav-down').addClass('nav-up');
        } else {
            // Scroll Up
            if(st + jQuery(window).height() < jQuery(document).height()) {
                jQuery('header').removeClass('nav-up').addClass('nav-down');
            }
        }
        
        lastScrollTop = st;
    }
    Díky moc!

  2. Co se právě děje na Webtrhu?
  3. var navbarHeight = jQuery('header').outerHeight();

    zmen na

    var navbarHeight = 300;

    ostatni si musis nastavit pres ty tridy v css

  4. Citace Původně odeslal Shopines Zobrazit příspěvek
    var navbarHeight = jQuery('header').outerHeight();

    zmen na

    var navbarHeight = 300;

    ostatni si musis nastavit pres ty tridy v css
    Super, z poloviny je to hotové. Nyní se ta třída přidá až po scrollnutí 300px, to je dobře. Ale chtěl bych, aby když se scrollne zase na 0px, tak aby se zase odebrala. Věděl bys, jak na to? Tedy pokud to není nic složitého. :)

    Díky!

  5. Citace Původně odeslal StepanP Zobrazit příspěvek
    Super, z poloviny je to hotové. Nyní se ta třída přidá až po scrollnutí 300px, to je dobře. Ale chtěl bych, aby když se scrollne zase na 0px, tak aby se zase odebrala. Věděl bys, jak na to? Tedy pokud to není nic složitého. :)

    Díky!
    Kód:
    $(window).bind('resize scroll load ready',function(){
    var ws=$(window).scrollTop();
    if(ws==0) {$('header').removeClass('nav-down');}
    });
    nebo staci upravit na

    // Scroll Up
    if(st==0) {jQuery('header').removeClass('nav-up').removeClass('nav-down');}
    else {
    if(st + jQuery(window).height() < jQuery(document).height()) {
    jQuery('header').removeClass('nav-up').addClass('nav-down');
    }
    }

  6. Citace Původně odeslal Shopines Zobrazit příspěvek
    Kód:
    $(window).bind('resize scroll load ready',function(){
    var ws=$(window).scrollTop();
    if(ws==0) {$('header').removeClass('nav-down');}
    });
    nebo staci upravit na

    // Scroll Up
    if(st==0) {jQuery('header').removeClass('nav-up').removeClass('nav-down');}
    else {
    if(st + jQuery(window).height() < jQuery(document).height()) {
    jQuery('header').removeClass('nav-up').addClass('nav-down');
    }
    }
    Paráda. Trochu jsem si akorát upravil hodnoty a už to jede, jak má. :-)

    Mockrát děkuji za pomoc!

Hostujeme u Server powered by TELE3