Pomoc s úpravou jQuery kódy

10. 9. 2018 12:26:40

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í.

// 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);

Díky moc!

10. 9. 2018 12:26:40

https://webtrh.cz/diskuse/pomoc-s-upravou-jquery-kody/#reply1364876

Shopines

(32 hodnocení)

10. 9. 2018 12:34:05

var navbarHeight = jQuery('header').outerHeight();

zmen na

var navbarHeight = 300;

ostatni si musis nastavit pres ty tridy v css

10. 9. 2018 12:34:05

https://webtrh.cz/diskuse/pomoc-s-upravou-jquery-kody/#reply1364875

StepanP

(12 hodnocení)

10. 9. 2018 12:59:42

Napsal Shopines;1484275
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!

10. 9. 2018 12:59:42

https://webtrh.cz/diskuse/pomoc-s-upravou-jquery-kody/#reply1364874

Shopines

(32 hodnocení)

10. 9. 2018 13:12:41

Napsal StepanP;1484283
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!

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');

}

10. 9. 2018 13:12:41

https://webtrh.cz/diskuse/pomoc-s-upravou-jquery-kody/#reply1364873

StepanP

(12 hodnocení)

10. 9. 2018 13:26:52

Napsal Shopines;1484286
$(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!

10. 9. 2018 13:26:52

https://webtrh.cz/diskuse/pomoc-s-upravou-jquery-kody/#reply1364872

Pro odpověď se přihlašte.

Přihlásit