Posiadam szablon strony, który kiedyś kupiłam na envato. Obecnie autor nie udziela już supportu do tego motywu, a tak szczerze powiedziawszy, to w ogóle się nie udziela pod swoimi pracami. Mam kawałek kodu .js, który odpowiednio zmodyfikowany “przyklei” mi menu.Czy ktoś mógłby na to rzucić okiem @Fizyda , @krystian3w ?
function sticky_header(){
if($('body').width() > 800){
if($('.met_fixed_nav').attr('data-fixed-width') == undefined) $('.met_fixed_nav').attr('data-fixed-width', $('.met_fixed_nav').width()+'px');
if($('.met_fixed_nav').attr('data-fixed-left') == undefined) $('.met_fixed_nav').attr('data-fixed-left', $('.met_fixed_nav').offset().left+'px');
if($(this).scrollTop() > 250 && $('.met_fixed_nav').length != 0){
$('.met_fixed_nav').addClass('met_fixed_nav').css({
'display' : 'none',
'left' : $('.met_fixed_nav').attr('data-fixed-left'),
'width' : $('.met_fixed_nav').attr('data-fixed-width')
}).fadeIn('slow');
}else if($(this).scrollTop() < 250 && $('.met_fixed_nav').length > 0){
$('.met_fixed_nav').fadeOut('fast',function(){
$('.met_fixed_nav').css({
'left' : '0',
'width' : 'asd'
});
$('.met_fixed_nav').removeClass('met_fixed_nav').fadeIn('fast');
});
}
}
}
function stickyHeaderSize(){
$('.met_main_nav').attr('data-fixed-width', $('.met_content').width()+'px');
$('.met_main_nav').attr('data-fixed-left', $('.met_content').offset().left+'px');
if($('.met_fixed_nav').length > 0){
$('.met_fixed_nav').css({
'left' : $('.met_main_nav').attr('data-fixed-left'),
'width' : $('.met_main_nav').attr('data-fixed-width')
});
}else{
$('.met_main_nav').css({
'left' : 0,
'width' : $('.met_main_nav').attr('data-fixed-width')
});
}
}
Fizyda
27 Kwiecień 2018 20:41
#2
Jak na razie temat wygląda na informację, a nie pytanie lub prośbę o pomoc. Napisz co chcesz wiedzieć, albo w czym potrzebujesz pomocy.
Pytanie zawarłam w temacie. Zamieściłam kod, który rzekomo można przestawić tak, aby menu wędrowało za przewijaniem strony. Nie wiem czy to prawda, bo autor już się nie udziela na envato.
Oryginał kodu z pobranego pliku na envato, wygląda tak:
/**
Sticky Header
@usedAt global,window scroll, dom ready
if($(this).scrollTop() > 250 && $('.met_fixed_nav').length != 0){
$('.met_fixed_nav').addClass('met_fixed_nav').css({
'display' : 'none',
'left' : $('.met_fixed_nav').attr('data-fixed-left'),
'width' : $('.met_fixed_nav').attr('data-fixed-width')
}).fadeIn('slow');
}else if($(this).scrollTop() < 250 && $('.met_fixed_nav').length > 0){
$('.met_fixed_nav').fadeOut('fast',function(){
$('.met_fixed_nav').css({
'left' : '0',
'width' : 'asd'
});
$('.met_fixed_nav').removeClass('met_fixed_nav').fadeIn('fast');
});
}
}
/**
Sticky Header Resizing
@usedAt global,window scroll, dom ready, window resize
if($(’.met_fixed_nav’).length > 0){
}
Nie wiem, czy jest możliwość edytowania którejś funkcji tak, aby menu zostawało na górze podczas przewijania. Pytanie zatem brzmi: czy da się z tego kodu zrobić przyklejone menu?
Fizyda
27 Kwiecień 2018 22:15
#4
Nie zwróciłem uwagi na to.
Na pewno się da. Nie powiem jak bo na podstawie samego kodu JS nie da się udzielić takiej odpowiedzi ponieważ, zależy to od tego jak jest zbudowana strona (html). Druga rzecz to uważam, że lepiej to zrobić za pomocą CSS niż JS.
Nie wiem, co mogę Ci jeszcze napisać, aby ułatwić pomaganie… Kod HTML menu zbudowany jest w taki sposób:
<nav class="met_content met_main_nav met_bgcolor3 clearfix" > **TUTAJ ODNOŚNIKI MENU** </nav>
Fizyda
27 Kwiecień 2018 22:51
#6
Ciężko stwierdzić na podstawie kodu JS, ale wydaje mi się, że raczej edytować to trzeba html.
Problem już rozwiązałam. Do kodu HTML dołożyłam met_fixed_nav i wszystko działa.
narandill
28 Kwiecień 2018 10:52
#8
Poprawne rozwiązanie:
#menu {
position: sticky;
width: 100%;
}
Jak pamiętam, to nie będzie działać bez określenia pozycji np. top: 0
https://www.w3schools.com/code/tryit.asp?filename=FQSNHKZ6MXSO
Szerokość rozciągała element nadmiernie, to usunąłem z przykładu.