| Autor |
Nachricht |
hövelmanns
Threadersteller
Dabei seit: 24.11.2012
Ort: -
Alter: 31
Geschlecht: 
|
Verfasst Sa 24.11.2012 00:18
Titel Problem mit Scroll sticking - jquery |
  |
|
Also folgendes Vorhaben...
Ich habe eine undefinierte Anzahl von Artikeln in einem container.
Wenn ich scrolle und das Ende eines Artikels erreiche soll der grade gescrollte Artikel
am unteren Bildschirmrand(bottom) kleben bleiben.
Der nächste Artikel soll sich dann von unten über den grade gescrollten schieben,
sodass eine Art Blättereffekt entsteht.
Mein bisheriger Code.
Code:
________________________________________________________________________________________
$(".item-page").addClass("stick");
$("#content").css("height", $("#content").height());
$(window).scroll(function(){
zindex = 214748364;
stick = $(".item-page");
stick.each(function(){$(this).css("z-index", zindex);zindex += 1;});
stick.addClass("stick");
$(".stick").each(function(){
obj=$(this);
var bottom = -(obj.height()-$(window).height());
if(obj.offset().top+obj.height()-$(window).height() <= $(window).scrollTop()){
$(this).css({"position": "fixed","top": bottom});
}else{
obj.css({"position": "relative","top": 0});
};
});
});
________________________________________________________________________________________
Funktionsweise an sich ist ok nur führt er bei jedem pixel der gesrollt wird (logischerweiße) die funktion aus.
Was mich wundert ist allerdings dass er jedes mal meinen style löscht und wieder hinzufügt was zu einem unerträglichen flackern führt.
http://jsfiddle.net/Tv9TU/5/
auf fiddle ist das flackern dafür gibt er alles objekten sofort die fixed position.
bin grade etwas ratlos
mfg hövelmanns
Zuletzt bearbeitet von hövelmanns am Sa 24.11.2012 00:20, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Sa 24.11.2012 10:48
Titel
|
|
|
Warum wundert dich das?
Wenn du dir kurz den Code anschaust:
Beim Scrollen führst du dauerhaft die ganze Zeit einen querySelector() aus und speicherst das Ergebnis in einer Variable.
Das macht man genau andersrum und nur genau einmal.
Dann änderst du beim Scrollen auch noch dauernd die CSS-Klasse und den z-index - auch das solltest nur einmal machen.
Dann kommt was ganz kurioses: Nachdem du all den Objekten, die du zig mal die Sekunde ausließt, eine Klasse gegeben hast, führst du einen weiteren querySelector aus, um genau diese Elemente zu iterieren... 
|
|
| |
|
|
|
Anzeige
|
|
|
hövelmanns
Threadersteller
Dabei seit: 24.11.2012
Ort: -
Alter: 31
Geschlecht:
|
Verfasst Sa 24.11.2012 13:57
Titel
|
|
|
mich wunderst weil ich noch kein crack in jquery bin 
aber wie soll ich sonst bei jedem pixel den er scrollt checken
ob die Bedingung wahr ist?
scollen> dann checken> dann für aktuelles ändern
Noch ein Problem was ich festgestellt hab ist dass die divs nachrutschen,
weil sie nicht absolut sind und dadurch natürlich alle nacheinander die Bedingung erfüllen.
vll kannst du mir mit ein bischen Code auf die Sprünge helfen.
|
|
| |
|
|
fyll
Dabei seit: 20.09.2003
Ort: Augsburg
Alter: 39
Geschlecht:
|
Verfasst Mo 26.11.2012 10:49
Titel
|
|
|
| hövelmanns hat geschrieben: | ...
aber wie soll ich sonst bei jedem pixel den er scrollt checken
ob die Bedingung wahr ist?.... |
Klar, das musst du auch prüfen - aber eben nicht mehr als das tun.
.. Aber da oben steht doch shcon fast ne Schritt für Schritt Bastelanleitung 
|
|
| |
|
|
hövelmanns
Threadersteller
Dabei seit: 24.11.2012
Ort: -
Alter: 31
Geschlecht:
|
Verfasst Di 27.11.2012 20:29
Titel
|
|
|
So gehts auf jeden fall auch nach browserresize mit allem drum und dran kann mann bestimmt nochn bischen schmälern aber reicht volkommen so.
Jetzt bräuchte ich nur noch ein scriptchen was mir elemente an das scrollende sticked wenn das offset des zu stickenden elements erreicht wird... 
aber dat bekomm ich schon noch hin
| Code: | function articleheight() {
wrapper=$('#content');
article=$('.item-page');
position=0;
zindex=214748364;
// spacer ist ein div am Ende jedes Artikels um ihm ein imitiertes bottom padding zu geben
// kann man eleganter lösen aber das gibt joomla im standart code nicht her
$('.spacer').css('height',$(window).height()-495*1.5);
//
article.each(function(){
$(this).css('z-index',zindex);zindex += 1;
$(this).css({'min-height':$(window).height()});
$(this).css({'position':'absolute','top': position+=$(this).prev().height()});
$(this).attr('anchor',$(this).offset().top+$(this).height()-$(window).height());
$(this).attr('offset',$(this).css('top'));
});
wrapper.css('height', parseInt(article.last().css('top').replace('px',''))+ parseInt(article.last().css('height').replace('px','')));
};
$(window).resize(function(){articleheight();});
|
| Code: |
function stick() {
object=$('.item-page');
object.addClass('stick');
stick=$('.stick');
$(window).scroll(function(){
stick.each(function(){
obj=$(this);
bottom=-(obj.height()-$(window).height());
if(obj.attr('anchor')<=$(window).scrollTop()){
obj.css({'position':'fixed','top':bottom});
}else{
obj.css({'position':'absolute','top':obj.attr('offset')});
}
});
});
};
|
Zuletzt bearbeitet von hövelmanns am Di 27.11.2012 20:36, insgesamt 4-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
JQuery Scroll.to funktioniert nicht in Firefox
mousewheel scroll problem!
flash - scroll - problem
Problem bei der Verwendung FX.Scroll von Mootool
kleines java - tiny - scroll problem
jquery FF und IE8 Problem
|
|
Willkommen auf dem Portal für Mediengestalter
