Kombinace dvou fixed menu s efekty vysouvání a zajíždění a scroll efektu na jednotlivé položky

Martina Zapletalová, DiS.

(11 hodnocení)

22. 1. 2016 20:09:01

Dobrý den/ Ahoj,

už několik hodin řeším optimální funkci pro stránku :

GreenDoors…

Mám s ní dva problémy:

1) Potřebuji sledovat hodnotu top prvku header a následně jí nastavovat pro divy v obsahu. Zatím to tak není, a pokud lišta zajede, tak tam zůstane díra, protože header se zasune o 101px.

2) Pokud uživatel čte a odroluje si nahoru, uvidí tam zůstavší padding. Jak mám ale rozlišit, jestli scrolluje uživatel, nebo script? Pokud si scrollne script nahoru, vyjede header a pokud by se obsah neodpaddingoval, zůstal by za headerem schovaný.

3) Podle scriptu, který jsem našla na stackoverflow hlídám pozici pro fixované menu. To funguje, ale někdy, při vyjetí na top pomocí myši se nedostraní třída margined, která menu drží pod headerem. Stane se to v jednom ze tří případů, ale nedochází mi souvislost.

Budu ráda za každou radu, protože si myslím, že mi to jen nedochází správným směrem a je to řešitelné. Nejsem jQuery high level programátor :-/.

Díky za každý nápad.

Martina

Na závěr scripty:

Skript ovládající pohyby headeru a na něj přidané třídy pro pohyb spodního .page-menu (hlavní):

/*Menu*/
       // Hide Header on on scroll down
        var didScroll;
        var lastScrollTop = 0;
        var delta = 1;
        var navbarHeight = $('header').outerHeight();
        
        $(window).scroll(function(event){
            didScroll = true;
        });
        
        setInterval(function() {
            if (didScroll) {
                hasScrolled();
                didScroll = false;
            }
        }, 150);
        
        function hasScrolled() {

var st = $(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
                $('header').removeClass('nav-down').addClass('nav-up');
                $(".page_menu").removeClass('margined');
                
            } else {
                $(".page_menu").removeClass('margined');
           
                // Scroll Up
                if(st + $(window).height() < $(document).height()) {
                    $('header').removeClass('nav-up').addClass('nav-down');
                    $(".f-nav").addClass('margined')
                }
            }
            lastScrollTop = st;
        }

Skript pro pomocné page menu:

Skript (vydřený :-D) pro scroll k jednotlivým divům.

22. 1. 2016 20:09:01