Κινούμενο Widget (“Sticky Sidebar”)


Κάντε το widget σας να μετακινείτε πάνω κάτω, έτσι ώστε να μη χάνεται ποτέ από τα μάτια σας.


Στο παρακάτω demo μπορείτε να δείτε το τελευταίο widget, στην δεξιά πλευρά του blog, να κινείτε μόλις κατεβείτε προς τα κάτω στον browser σας.
Δείτε demo

Είναι απλό στη χρήση του. Αρκεί να βάλετε το παρακάτω script μέσα στον κώδικα του widget σας.
Προσοχή όμως γιατί θα κινούνται και όσα widgets βρίσκονται κάτω απ' αυτό που επιλέξατε. Γι αυτό καλό είναι να κάνετε χρήση του script στο τελευταίο widget σας.

Δείτε πως θα το κάνετε. Επιλέξτε [Διάταξη] - [Προσθήκη gadget] - [HTML/Javascript] και επικολλήστε τον παρακάτω κώδικα. Αντικαταστήστε τα μπλε γράμματα με τη λέξη GADGET με τον κώδικα του gadget σας και πατήστε [Αποθήκευση]. (Μην βάλετε τίτλο στο widgets)

<script type="text/javascript">
 $(function() {
  var offset = $("#sidebar").offset();
  var topPadding = 15;
  $(window).scroll(function() {
   if ($(window).scrollTop() > offset.top) {
    $("#sidebar").stop().animate({
     marginTop: $(window).scrollTop() - offset.top + topPadding
    });
   } else {
    $("#sidebar").stop().animate({
     marginTop: 0
    });
   };
  });
 });
</script>
<div id="sidebar">
GADGET
</div>


Ρυθμίσεις: Μέσα στον κώδικα υπάρχει το var topPadding = 15; στο οποίο μπορείτε να βάλετε έναν αρνητικό ή θετικό αριθμό της επιλογής σας, έτσι ώστε το κολπάκι να φαίνεται καλύτερα στο δικό σας blog.

0 σχόλια:

Δικά μου

Larissakid

Χρησιμοποιώ