ROZWIĄZANE Przypięte menu, pływające razem z przesuwaniem strony. Jak zrobić?

Discussion in 'Sklep internetowy eSklep' started by papux, Dec 11, 2016.

  1. papux

    papux Laureat

    Messages:
    402
    Likes Received:
    114
    Witam

    Jak przypiąć menu do górnej części strony tak aby nie znikało tylko płynęło razem z przesuwaniem strony w dół.
    Tak jak ma to np Allegro z szukajką u góry.

    moja strona to liveno24.pl
     
  2. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Messages:
    3,087
    Likes Received:
    302
    @papux nie chcę "reklamować" zewnętrznych stron, dlatego napiszę tylko, że w Google poszukałbym pod hasłem: css sticky menu top

    Powinieneś znaleźć instrukcje jak to zrobić za pomocą CSS i jQuery. Potem pozostaje tylko użyć tych instrukcji we Własnym Stylu CSS itd.
     
  3. papux

    papux Laureat

    Messages:
    402
    Likes Received:
    114
    Dzięki wielkie doskonałą wskazówka.
    Zrobione
     
  4. papux

    papux Laureat

    Messages:
    402
    Likes Received:
    114
    W związku z tym menu.
    Zrealizowałem płynięcie na prostym krypcie.
    Code:
    $(document).ready(function() {
    var stickyNavTop = $('.menu').offset().top;
     
    var stickyNav = function(){
    var scrollTop = $(window).scrollTop();
         
    if (scrollTop > stickyNavTop) {
        $('.menu').addClass('sticky');
    } else {
        $('.menu').removeClass('sticky');
    }
    };
     
    stickyNav();
     
    $(window).scroll(function() {
      stickyNav();
    });
    });
    Jest jeden problem.
    Przy skrolowaniu bardzo wolnym w momencie odpięcia paska cały CSS ma chrupnięcie jakieś kilkanaście px w górę.
    Nie ma takiego płynnego przylepienia paska tylko chamskie oderwanie które wpływa na cały CSS.
    Może ktoś ma pomysł jak upłynnić moment przypięcia paska u góry żeby realizowane było to płynnie.
     
    Mariusz likes this.
  5. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Messages:
    3,087
    Likes Received:
    302
    @papux powiem szczerze, że bardzo ładnie to wygląda :) Gratuluję!

    Sprawdziłem kwestie "przepięcia", ale wydaje mi się, że już sobie poradziłeś. Na moim komputerze (przeglądarka Chrome) menu w Twoim sklepie "płynnie" się przykleja do góry ekranu. Chyba już sobie poradziłeś przez weekend, prawda?
     
  6. papux

    papux Laureat

    Messages:
    402
    Likes Received:
    114
    Nie wiem jak jest u ciebie ja używam opery.
    Jak chwycę za suwak i delikatnie powoli przesuwam w duł to w momencie odpięcia menu jest skok całej dolnej traści do góry.
    Przy szybkim skrolowaniu tego nie czuć.
    Muszę pokombinować bo widziałem strony na których realizowane jest to bardzo płynnie.
    Tak jak by w momencie odpięcia menu trzeba było zrobić regułę obniżenia całej treści o kilkanaście pikseli.

    Próbuje to rozpracować
     

Share This Page