'Zakotwiczenie' belki menu

[Almond]

Witam,

 

Szukam sposobu na zakotwiczenie górnego menu poziomego, tak aby po scrolowaniu w dół menu było zawsze widoczne.

 

Szukałem na różnych forach, które pokazują jakiego kodu użyć, ale proszę o pomoc jak to przystosować do Presty?

 

Strony z kodem:

http://jsfiddle.net/adamb/F4BmP/

http://jsfiddle.net/VASaD/

 

Moja strona:

http://almondfurniture.co.uk/pl/ (chodzi o te ciemne menu poziome)

presta: 1.6.0.9.

 

Pozdrawam

[Almond]

Witam,

 

Udało się zakotwiczyć belkę. Gdyby ktoś potrzebował to użyłem kodów dostępnych tutaj http://jsfiddle.net/VASaD/

 

Kod dla css umieściłem w global.css, analogicznie kod js w global.js. Ważne by podmienić odpowiedni identyfikator. W moim przypadku #menu w przykładowym kodzie podmieniłem z #pts-mainnav, gdyż ten id odpowiada za moje menu.

 

Nie chciałem żeby belka była zakotwiczona na stronie głównej,dlatego w js użyłem kodu if (page_name != 'index').

Dodatkowo, by belka nie chowała się pod innymi div-ami, dodałem jej z-index. Nie wiem ile poziomów ma strona, żeby mieć pewność że będzie zawsze na wierzchu - dałem 5.

 

Całość dodanego kodu po zmianach wygląda następująco:

 

Global.css:

#pts-mainnav {
}
#pts-mainnav.scrolling {
    z-index: 5;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

Global.js:

if (page_name != 'index'){
jQuery(function ($) {
    var scrollingStartDistance = $("#pts-mainnav").offset().top;

    $(document).scroll(function () {
        var scrollTop = $(document).scrollTop();
        
        $("#pts-mainnav").toggleClass("scrolling", scrollTop > scrollingStartDistance);
    });
});
}

Pozdrawiam

Edited December 22, 2016 by Almond (see edit history)

[endriu107]

Kod js w przykładach odnosi sie do pewnych elementów które są identyfikowane znacznikami id lub klasą danego produktu, jedyne co musisz zrobić to podstawić właściwe id/klase w kodzie js u ciebie id menu to #cavas_menu.

[design4VIP]

kod usialbys umiescic w module menu, jego pliku .tpl/ to chyba nie jest standardowe menu, wiec ciezko poweidziec jaki to dokladnie modul i jaki dokladnie plik. 

 

dwa, na twojej stornie za bardzo nie widze mozliwosci takeigo rozwiazania. masz do menu podczepione rowniez to menu alfabetyczne, ktore w momencie podpiecia na stale do gory tez zostanei podpiete, a co za tym idzie bedzie zalanialo czesciowo lewa storne i nie bedzie mozliwosci jego przesuniecia w momencie jezeli bedzie wyzsze od wysokosci monitora (rozdzielczosci). 

[Almond]

Jutro rano spróbuję zmienić kilka plików, może uda mi się znaleźć odpowiedni.

Muszę również dodać klasę 'fixed' do css, tak?

 

Jeżeli chodzi o js to straszny ze mnie laik, chyba pora obejrzeć kilka tutoriali.

@design4VIP masz rację, ale spróbuję to alfebatyczne menu jakoś ominąć, żeby przesuwała się tylko ciemna część.

 

Dziękuję za Wasze odpowiedzi. Pozdrawiam