Toolbar που "κολλάει" στο πάνω μέρος όταν κάνεις scroll το παράθυρο πιο κάτω από αυτό

09.02.12

Αυτό το εφέ είναι αρκετά χρήσιμο όταν έχουμε ένα toolbar σε κάποια θέση της σελίδας (όχι πάνω πάνω) που δένει αισθητικά με το περιβάλλον, και έχει νόημα μόνο από εκεί και κάτω, αλλά το μεγάλο μέγεθος της σελίδας απαιτεί να είναι ορατό συνεχώς. Έτσι όταν αρχίζουμε να κατεβαίνουμε σιγά σιγά κάτω κάτω θέλουμε να "κολλήσει στην οροφή"


$(document).ready(function(){
    //ελέγχουμε αν η σελίδα φόρτωσε σε σημείο που πρέπει να εμφανιστεί 
    //το toolbar
    showToolbarIfApplicable();
    //ελέγχουμε αν ο χρήστης έκανε scroll σε σημείο όπου πρέπει να 
    //εμφανίσουμε το toolbar
    $(window).scroll(showToolbarIfApplicable); 
})

function showToolbarIfApplicable(){
  //Αν είμαστε κάτω από το φυσικό ύψος της μπάρας μας
  if ($(window).scrollTop()>$('.navBar').offset().top) { 
     //θέτουμε τη θέση της μπάρας σχετική με το παράθυρο και πάνω πάνω
     $('.navBar').css({position:'fixed', top : 0}); 
   } else {
     // αλλιώς επαναφέρουμε τις προηγούμενες ρυθμίσεις
     $('.navBarTool').fadeOut({position:'', top : ''});
   }
}