Avatar billede Morten Professor
20. januar 2018 - 14:13 Der er 1 kommentar

Filter + menu fixed scroll som asos.com

Hej

Jeg vil høre om hvordan jeg får det med et søge filter og header til at forsvinde når jeg skroller ned men når jeg scroller op bliver den synlig igen.
Når jeg så når toppen har søge filteret placeret sig længere nede i forhold til header.
Har prøvet det med Sticky men kan ikke finde en god løsning på mit projekt.
Det som jeg forsøger at få til at virke er at få det vist som på asos.com.

Har fået lavet så det kan forsvinde når jeg scroller ned, og bliver synlig når jeg scroller op.
Men filteret vil jeg gerne have til at stå stille et sted længere nede når jeg når toppen.

Det jeg har lavet indtil videre er:
Js:
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('.site-header').outerHeight();
var filterHeight = $('.entry-header h1').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

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
        $('.site-header').removeClass('nav-down').addClass('nav-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('.site-header').removeClass('nav-up').addClass('nav-down');
        }
    }
    if (st > lastScrollTop && st > filterHeight){
        // Scroll Down
        $('.entry-header h1').removeClass('filter-down').addClass('filter-up');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('.entry-header h1').removeClass('filter-up').addClass('filter-down');
        }
    }
    lastScrollTop = st;
}

CSS:
.nav-down {
  position: fixed;
  width: 100%;
  display: block;
}
.nav-up {
  top: -176px;
}
.filter-down {
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  width: 72%;
  z-index: 1000;
}
.filter-up {
  width: 100%;
}

Med venlig hilsen
Morten
Avatar billede Morten Professor
20. januar 2018 - 14:46 #1
Det er noget alla det jeg har lavet indtil videre, det er bare lige for at vise, og for i kan rette hvis i ser en løsning:
https://jsfiddle.net/3gc0gq5t/
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester