Beispiel für einen mashbaren Floating-Effekt mit jQuery
Mashable, am besten bekannt als Social-Media-Ressourcen-Website, hat beim Scrollen der Seite durch den Benutzer einen fantastischen schwebenden Effekt erzeugt. Hier ist eine einfache Idee, um diesen schwebenden Effekt mit jQuery zu klonen.
Idee…
-
Erstellen Sie eine schwebende Box.
-
Initialisieren Sie die Position der Floating Box und setzen Sie sie neben den Hauptteil.
-
Überprüfen Sie während des Bildlaufs die Position der Bildlaufleiste.
-
Wenn die y-Position der Bildlaufleiste größer als die y-Position des schwebenden Felds ist, ändern Sie die y-Position des schwebenden Felds dynamisch.
-
Stellen Sie die ursprüngliche Position wieder her, während die y-Position der Bildlaufleiste kleiner als die y-Position des schwebenden Felds ist.
-
Verwenden Sie natürlich jQuery.
1. HTML-Layout
Ein einfaches HTML-Layout mit Kopf-, Inhalts- und Fußzeile setzt ein div-Feld über den Inhalt.
header
content
Mashable floating effect example
2. Schwimmbox 90 × 200
Dies ist die Box, die reibungslos schwebt, während Leute durch die Box scrollen. Möglicherweise müssen Sie die“margin-left:-100px; ”ein wenig an Ihre Bedürfnisse anpassen.
#floating-box{
width:90px;
height:200px;
border:1px solid red;
background-color:#BBBBBB;
float:left;
margin-left:-100px;
margin-right:10px;
position:absolute;
z-index:1;
}
3. Bitte keine Konflikte
Stellen Sie sicher, dass jQuery keinen Konflikt mit einer anderen Bibliothek hat. Sehr zu empfehlen, es zu überprüfen.
//avoid conflict with other script
$j=jQuery.noConflict();
$j(document).ready(function($) {
4. Position, Position, Position
Binden Sie das jQuery scroll () -Ereignis, um die Position der Bildlaufleiste des Browsers zu überprüfen.
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var isfixed = $floatingbox.css('position') == 'fixed';
if($floatingbox.length > 0){
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: -500
});
} else if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: originalX
});
}
}
});
Wenn die y-Position der Bildlaufleiste größer als die y-Position der schwebenden Box ist, ändern Sie die y-Position der schwebenden Box in "marginLeft: -500". Möglicherweise müssen Sie diesen Wert an Ihre Bedürfnisse anpassen.
if ( scrollY > bodyY && !isfixed ) {
$floatingbox.stop().css({
position: 'fixed',
left: '50%',
top: 20,
marginLeft: -500
});
}
Wenn die y-Position der Bildlaufleiste kleiner als die y-Position des schwebenden Felds ist, stellen Sie die ursprüngliche Position wieder her.
if ( scrollY < bodyY && isfixed ) {
$floatingbox.css({
position: 'relative',
left: 0,
top: 0,
marginLeft: originalX
});
}
5. Done
Spielen Sie das folgende Beispiel, um sich ein Bild von den Arbeiten zu machen.
P.S This floating effect feature is implemented in my DiggDigg WordPress plugin.