Framework T4 - pływające menu

[wezykowski]

Jak w templatce t4_bs5_blank ustawić pływające menu? Chciałbym by menu zawsze znajdowało się na górze strony.

[siristru]

Nie wiem czy można ustawić w szablonie... zawsze można to zrobić CSSem. Jak coś to mogę pomóc ;)

[siristru]

Tak, o takie menu chodzi. Zobacz tutaj: https://muzeum.szczecin.pl/
Przewijasz stronę i w pewnym momencie menu przykleja się do górnej krawędzi ekranu i pozostaje tam przez cały czas dalszego przewijania.

[Frodoo]

Generalnie musisz zastosować taki kod jquery dla elementu o klasie art-nav


$(function() {
// Stick the #nav to the top of the window
var nav = $('.art-nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{

if(screen.width > 1064){

nav.css({
position: 'absolute',
top: 128
});

}else{
nav.css({
position: 'relative'
});
}
isFixed = false;
}
});
});

Tutaj masz nadanie zmiennych


var nav = $('.art-nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);

Tutaj masz gdy zjedziesz w dół nadana jest reguła fixed dla menu. Fixed z top 0 oznacza, że przyklei się menu do górnej krawędzi


$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0
});
isFixed = true;
}
Tutaj co ma się stać gdy menu już nie jest poza ekranem czyli powrócenie wartości na początku


else if (!shouldBeFixed && isFixed)
{

if(screen.width > 1064){

nav.css({
position: 'absolute',
top: 128
});

}else{
nav.css({
position: 'relative'
});
}
isFixed = false;
}

Musisz sobie to sam przerobić. Bo np top: 128 czyli odległość od górnej krawędzi okna powinna być w każdym szablonie inna więc musisz sobie to dostosować. Tak wklejam kod bo nikt nie odpowiedział jak zrobić