[rozwiazane] Zagadka w javascript / jQuery!
Pisze stronke z automatycznie zmieniajacym sie elementem menu w miare jak coraz bardziej sie zjezdza strona w dol.
Używam skryptu ScrollSpy - https://github.com/sxalexander/jquery-scrollspy
oraz wlasnego kodu do odpalenia: http://pastebin.com/pqp1kBAg
Kod:
console.log($('.middle-container').offset().top);
var sidebarmenu = $('.fixedsidebar-column .menu');
var counter = $('.fixedsidebar-column');
counter.prepend('<span class="c1" style="position:absolute;color:red;font-size:24px;right:-90px;z-index:3000;">0</span>');
counter.prepend('<span class="c2" style="position:absolute;color:red;font-size:24px;right:-90px;z-index:3000;top:60px;">0</span>');
counter2 = counter.find('.c2');
counter = counter.find('.c1');
var offsetVisible = 200;
var liheight = sidebarmenu.find('li').first();
liheight = liheight.height() - (parseInt(liheight.find('a').css('padding-bottom')));
var sekcjaindex = 0;
$('.page-template-page-fixedsidebar-php .pasek').each(function(i) {
var name = $(this).attr('class');
name = name.match(/sekcja\-[a-z,A-z,\-]+/g);
if (!name) {
return;
} else {
name = name[0];
name = name.replace('sekcja-','');
}
var id = '#'+name;
var position = $(this).offset();
console.log($(this));
var difference = $(this).offset().top - $(this).position().top;
$(this).prepend('<span style="position:absolute;color:red;font-size:30px;z-index:3000;">top: '+($(this).offset().top )+'</span>');
$(this).append('<span style="position:absolute;color:red;bottom:0;font-size:30px;z-index:3000;">bottom: '+($(this).offset().top + $(this).height() )+'</span>');
// console.log(id + ' ' + position.top);
$(this).scrollspy({
min: position.top,
max: position.top + $(this).height() ,
buffer: 180,
onEnter: function(element, position) {
counter.text($(window).scrollTop());
//console.log(id+' min: '+(this.min)+' scrolltop: '+$(window).scrollTop());
sidebarmenu.find('a[href="'+id+'"]').closest('li').addClass('current');
},
onLeave: function(element, position) {
sidebarmenu.find('a[href="'+id+'"]').closest('li').removeClass('current');
}
});
sekcjaindex++;
});
$(window).scroll(function(e){
counter2.text($(window).scrollTop());
})
Całość znajduje się tutaj: http://www.test6.stronademo.pl/ofert...y-internetowe/
Wiem że troche smietnik ale caly czas nad tym pracuje i coraz bardziej sie zasmieca, jak zadziala jak trzeba to posprzatam.
Ale do sedna o co chodzi z problemem:
Pozycja w menu zmienia sie jak trzeba, do momentu Grafika na Social media - tutaj zaczyna przeskakiwac za wczesnie. ZA CHOLERE NIE WIEM DLACZEGO. Szukalem jakichs zaleznosci, moze chodzilo o wysokosc pozycji w menu, i z kazda kolejna coraz bardziej sie sypie ale nie. Niby chodzi sobie dobrze, az nagle ostatnie 3 pozycje zmieniaja sie o duzo za wczesnie.
@Alex Fortune ; @Haan ; @Kusterek ;
Piszę tutaj bo juz na prawde nie widze rozwiazania xD Nie mam pojecia dlaczego zmienia sie tam za wczesnie, choc nie powinno.
@EDIT
ROZWIĄZANE:
1. jQuery błędnie mierzy wysokosc dla css box-sizing:border-box, trzeba zamiast elem.height(); uzyc parseInt(elem.css('height');
2. Blednie zapisywalem index sekcji, zawsze uzywal 11 a nie po kolei, dodalem index jako atrybut data-index dla kazdej sekcji, i z niej czytalem kolejne przesuniecie w menu.
3. Za wczesnie odpalana funkcja, dodalem setTimeout zeby strona zdazyla sie wygenerowac do konca.
Ostateczny kod:
Kod:
var sidebarmenu = $('.fixedsidebar-column .menu');
var offsetVisible = 180;
var sekcjaindex = 0;
setTimeout(function(){
$('.page-template-page-fixedsidebar-php .pasek').each(function(i) {
var sek = $(this);
var name = sek.attr('class');
sek.attr('data-index',sekcjaindex);
name = name.match(/sekcja\-[a-z,A-z,\-]+/g);
if (!name) {
return;
} else {
name = name[0];
name = name.replace('sekcja-','');
}
var id = '#'+name;
var position = sek.offset();
sek.scrollspy({
min: position.top - parseInt(sek.attr('data-index'))*30,
max: position.top + parseInt(sek.css('height')) - parseInt(sek.attr('data-index'))*30,
buffer: offsetVisible,
onEnter: function(element, position) {
console.log(parseInt(sek.attr('data-index')));
sidebarmenu.find('a[href="'+id+'"]').closest('li').addClass('current');
},
onLeave: function(element, position) {
sidebarmenu.find('a[href="'+id+'"]').closest('li').removeClass('current');
}
});
sekcjaindex++;
});
},100);
