j-Sticker

jComponent 20 · jcomponent@20 component Παράδειγμα φορτωμένο με jComponent 20

ΕΠΙΤΡΟΦΗ:

Αυτή η κατηγορία on {String} είναι ενεργοποιημένη όταν η θέση scroll top είναι μεγαλύτερη από αυτή τη θέση του στοιχείου Y.
Αυτή η κατηγορία off {String} είναι ενεργοποιημένη όταν η θέση scroll top είναι μικρότερη από αυτή τη θέση του στοιχείου Y.
Το margin {Number} είναι ένα περιθώριο που θα αφαιρεθεί από τη θέση του top του τρέχοντος στοιχείου.
Το xs {Boolean} επιτρέπει το στυλ για επιπλέον μικρή οθόνη (προεπιλεγμένο: false)
Το sm {Boolean} επιτρέπει το στυλ μικρής οθόνης (προεπιλεγμένο: true)
Το md {Boolean} επιτρέπει το στυλ μεσαίας οθόνης (προεπιλεγμένο: true)
Το lg {Boolean} επιτρέπει το στυλ για μεγάλη οθόνη (προεπιλεγμένο: true)
type {String} ένα όνομα μέσου για την απόκτηση της θέσης offset (προεπιλεγμένη) ή position
marginparent {Number} ένα περιθώριο για το στρογγυλό parent (προεπιλεγμένο: 0)
parent {String} προαιρετικό, γονικός επιλεκτής (βλέπε παράδειγμα για κατανόηση)
NEW: minheight {Number} ένα ελάχιστο ύψος της περιοχής στροφής για την εφαρμογή των τάξεων

Χρησιμοποιήστε το με <ui-component name="sticker">Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση DEF.fallback (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

example.html

<style>
	.fixed { position: fixed; background-color: red; right: 0; top: 0; left: 0; padding: 20px 0; text-align: center; color: white; }
	.relative { background-color: blue; padding: 10px; border-radius: 4px; position: relative; display: inline-block; color: white; }
</style>

<div style="padding:50px; height:1500px">
	<div style="background-color:#F0F0F0;height:500px;margin:200px 0 0">
		<ui-component name="sticker" config="parent:parent" style="position:absolute">
			This text will depent on parent position.
		</ui-component>
	</div>
</div>
<hr />
<div style="padding:50px; height:1500px">
	<ui-component name="sticker" config="on:relative;off:fixed">
		This text will be on fixed position.
	</ui-component>
</div>