Tutorials
Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.
Element beim Scrollen fixieren mit jQuery
<script type="text/javascript" src="/wp-content/themes/thematicpowerblog/scrollcontainer.js"></script>
Ich habe ein schönes kleines Skript entdeckt was sicherlich dem Einen oder Anderen helfen könnte. Es handelt sich hierbei um Skript, dass ein Element mitscrollen lässt. Das ist manchmal vom Kunden gewünscht. Bei mir handelte es sich um ein Callback-Formular, dass immer rechts an derselben Stelle stehen sollte, auch beim Scrollen. Um das ganze zu realisieren braucht ihr nur folgenden Code.
Eine Demo habe ich direkt hier eingebunden. Die Facebook Likebox scrollt immer mit. ;)
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="http://www.facebook.com/andreknieriemde" width="292" show_faces="true" border_color="" stream="false" header="true"></fb:like-box>
Fangen wir an mit dem HTML und CSS Markup:
<style>
/* required to avoid jumping */
#commentWrapper {
left: 450px;
position: absolute;
margin-left: 35px;
width: 280px;
}
#comment {
position: absolute;
top: 0;
/* just used to show how to include the margin in the effect */
margin-top: 20px;
border-top: 1px solid purple;
padding-top: 19px;
}
#comment.fixed {
position: fixed;
top: 0;
}
</style>
<div class="facebookbox">
<div class="facebookbox">
<form>
<!-- take their response -->
</form>
</div>
</div>
Und nun kommen wir zum Javascript:
jQuery(document).ready(function () {
var top = jQuery('.facebookbox').offset().top - parseFloat(jQuery('.facebookbox').css('marginTop').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
// what the y position of the scroll is
var y = jQuery(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
jQuery('.facebookbox').addClass('fixed');
} else {
// otherwise remove it
jQuery('.facebookbox').removeClass('fixed');
}
});
});
Was macht das Skript?
1. Es ermittelt die Position des Containers der ganzen Seite
2. Danach ermittelt es die Position des Containers
3. Wenn man Scrollt werden die beiden Werte verglichen.
4. Würde man den Container herausscrollen wird ihm die Klasse "fixed" gegeben, die dem Container die Position Fixed gibt und somit immer an der selben Stelle bleibt.
Kommentare
sry nach dem Redesign der Seite sind einige Dinger kaputt gegangen, die ich nicht sehen konnte.
Also ansich ist es relativ einfach:
1: Binde jQuery auf deine Seite ein.
2: Erstelle eine JS Datei und lade Sie hinter deinem jQuery.
3: Dann füge meinen oben genannten Code ein, wobei du jQuery('.facebookbox') durch dein Objekt ersetzt. also '.asda' für eine Klasse und '#asdasd' für eine ID.
4: Dann noch in dem CSS sagen, dass wenn das Objekt die Klasse fixed hat, es position:fixed bekommt.
Das wars.
Viele Grüße
Würde gerne meine linke Spalte so scrollbar machen, dass sie nur bis zu einem bestimmten Wert mitscrollt.
Zur Zeit habe ich nur die Optionen "fixed", was aber zu statisch ist, und nicht aussieht.
Ansonsten verschwindet die linke Spalte unter meinem fixierten Header.
Deine Lösung klingt nach meiner! ;)
Habe aber noch nie was mit Jquery gemacht.
Wie bindest Du die nötigen Dateien ein?
Grüße
Frank
Hinterlasse einen Kommentar