Blogger's Solutions

Build your blog with our tools

A Good Reason for a Successful Βlogger

Bootstrap: How can solved affix scroll problem easy

IT Special Advisor


Πώς μπορεί να λυθεί εύκολα το πρόβλημα κύλισης - scroll- με την κλάση  affix του Bootstrap .

Σίγουρα θα έχετε δει κατά την πλοήγησή σας στο internet σελίδες και blog  που διαθέτουν ένα αντικείμενο ή αντικείμενα "αγκιστρωμένα" -affixed- σε μια πλευρά, δεξιά ή αριστερά της σελίδας. Μάλιστα αυτά τα αντικείμενα είτε πρόκειται για μια διαφήμιση είτε για κάποιο μενού έχουν την ιδιότητα να σας "ακολουθούν" καθώς κάνουμε scroll στην σελίδα είτε προς τα πάνω ή κάτω.
Μπορούμε να δημιουργήσουμε, εύκολα τέτοια αντικείμενα μέσα από το Bootstrap. άλλωστε μπορείτε να δείτε πόσο έυλολο είναι το Πώς μπορείτε να δημιουργείτε επαγγελματικές ιστοσελίδες.

Με την κλάση affix και συγκεκριμένα προσθέτοντας σε ένα αντικείμενο div  το data-spy="affix" δηλώνουμε το αντικείμενο affixed.
Στην συνέχεια θα πρέπει να δηλώσουμε από πιο σημείο της σελίδας θα ξεκινά η "αγκίστρωση" ή αλλιώς το affix του. Για να το πετύχουμε αυτό έχουμε δύο τρόπους. 
1) Μπορούμε να ορίσουμε για αρχή από το πάνω μέρος της σελίδας, με την προσθήκη του data-offset-top ="αριθμός_pixels"
ή
2) Αν μας ενδιαφέρει από το κάτω μέρος της σελίδας να ξεκινά η μέτρηση τότε προσθέτουμε το data-offset-bottom="αριθμός_pixels"

Μέχρι στιγμής έχουμε
 <div data-offset-top ="αριθμός_pixels"> κώδικάς... </div> Τώρα προσθέτουμε και την κλάση affix και θα δώσουμε και ένα id. Για παράδειγμα θα δώσουμε μόνο μια περίπτωση : <div class="affix"  id="ad" data-offset-top ="αριθμός_pixels"> κώδικάς... </div> και είμαστε σχεδόν έτοιμοι.
 Στην συνέχεια θα πρέπει να ορίσουμε το CSS του αντικειμένου και να προσθέσουμε σε ποιο ύψος -σε pixels- θα εμφανίζεται στην οθόνη. Έτσι λοιπόν στο CSS της σελίδας μας ή μέσα σε tags <style>...</style> προσθέτουμε τον κώδικα:
#ad.affix{
  position: fixed;
  top: 100px;
}
Έτσι ολοκληρώνουμε την διαδικασία, και το αντικείμενό μας είναι έτοιμο. Μπορείτε να δείτε ένα σχετικό παράδειγμα Bootstrap affix scroll.

Ποιο είναι το πρόβλημα του affix scroll.

Το πρόβλημα εστιάζεται ότι το αντικείμενο ακολουθεί το scroll σας σε όλη την διαδρομή της σελίδας. Με αποτέλεσμα να "δείχνει ξένο σώμα" από αυτή. Αυτό βέβαια εξαρτάται και από τον σχεδιασμό της σελίδας σας.
Εδώ θα δούμε πως μπορούμε να λυθεί εύκολα το πρόβλημα κύλισης - scroll- και να ενσωματώσουμε στην σελίδα το affix αντικείμενό μας.

Η διαδικασία είναι σχεδόν η ίδια, όπως και προηγουμένως, με την διαφορά ότι τώρα θα πρέπει να ορίσουμε δύο σημεία ταυτόχρονα. Το πάνω, από εκεί που θα ξεκινά το scroll του αντικειμένου και το κάτω εκεί που θα σταματά και θα ενσωματώνεται. Εύκολο;

Ναι είναι , δείτε
<div class="affix"  id="ad" data-offset-top ="αριθμός_pixels" data-offset-bottom ="αριθμός_pixels"
κώδικάς... 
</div>
Προσθέτουμε και το CSS.
 
#ad.affix{
  position: fixed;
  top: 100px;
}
.affix-top{
  position: static;
}
.affix-bottom{
  position:absolute;
  bottom:auto !important;
}
Τελειώσατε!!!
 Τόσο απλά και γρήγορα χωρίς πολλά javascript και περιττό κώδικα που αναφέρουν στα πιο πολλά site.

Αν το άρθρο αυτό σας βοήθησε  να φτιάξετε το δικό σας Bootsptrap affix scroll αντικείμενο γράψτε το μας, στα σχόλια κάτω από αυτή την ανάρτηση.


Share this :

Follow Us

Enter your email address:

We protect your privacy





Card image cap

Angelos Drakopoulos

Follow on G+

Google+

1 σχόλιο:

Write a comment