Πίσω στο ευρετήριο

Sticky navbar με css και javascript Posted: 28-Feb-2020 18:32 PM

javascript, html, css tutorial
Δες το Demo Κατέβασε τα αρχεία 3 downloads

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

  • Θα χρειαστούμε ένα αρχειο index.html
  • Ενα αρχείο style.css
  • Και ενα αρχείο script.js

index.html


<body>
   
   <!-- Στήν html έχουμε ένα header και ένα nav tag με id=navbar 
          τίποτα το ιδιαίτερο -->
   <header>
      <h1>Sticky navbar</h1>
      <h3>Sticky navbar με css και javascript</h3>
      <h4>Κάνε scroll στήν σελίδα για να δεις την nav-bar να κολλάει στήν κορυφή</h4>
   </header>
   <nav id="navbar">
      <ul>
         <li><a href="#">Αρχική</a></li>
         <li><a href="#">Προϊόντα</a></li>
         <li><a href="#">Τιμοκατάλος</a></li>
         <li><a href="#">Επικοινωνία</a></li>
      </ul>
   </nav>
   <!-- Tο javasript αρχείο μας -->
   <script src="script.js"></script>

style.css


/* Ότι χρειάζεται για να δουλέψει η sticky navbar είναι εδώ */
.sticky {
  position: fixed;
  top: 0;
  z-index: 99;
}

Αν θέλετε να δείτε ολόκληρο το css που έχει το style του demo κατεβάστε τα αρχεία στο λινκ στην αρχή του tutorial.

script.js


// Θα γράψουμε mια function για να κάνουμε την navbar να κολλάει στην
// κορυφή της σελίδας κατά το scroll.
function stickyNav(){
 
  // Θέλουμε μια μεταβλητή που θα κρατάει το nav menu για να έχουμε ένα σημείο
  // αναφοράς.
  let navbar = document.querySelector('#navbar');
  
  // Μετά θέλουμε την αρχική απόσταση της nav από την αρχή της σελίδας, αυτό θα το πετύχουμε
  // με την el.offsetTop  
  let fromTop = navbar.offsetTop ;

  // Tώρα αφού έχουμε μέσα στην fromTop την απόσταση, θα γράψουμε μια function όπου θα
  // τρέχει κάθε φορά που θα κάνουμε scroll στην σελίδα.
  // Αυτό θα γίνει με την window.onscroll(). 
  window.onscroll = function(){
    // Πρώτα απ όλα χρειαζόμαστε την τρέχουσα τιμή του y κάθε φορά που κάνουμε scroll.      
    let y = window.scrollY;
    
    // Τώρα  που έχουμε την τρέχουσα τιμή του y μπορούμε να γράψουμε ενα if και να τσεκάρουμε
    // την τρέχουσα τιμή y, με την τιμή που κρατάει η fromTop.
    if(y >= fromTop){
      // εάν το y είναι μεγαλύτερο η ίσο με την αρχική απόσταση τις navbar
      // θα προσθέτουμε στην nav την css class sticky.
      navbar.classList.add('sticky');
    }else{
      // Αλλιώς θα αφαιρούμε την κλάση sticky
      navbar.classList.remove('sticky');
    }
  }
}
// Τέλος τρέχουμε την function.
stickyNav();

Για περισότερες πληροφορίες πάνω στίς συναρτήσεις που χρησιμοποιήσαμε θα βρείτε στα παρακάτω links.

Σχόλια και ερωτήσεις μέσω facebook

Παρόμοια css tutorials

Resposive navbar with css and javascript 05-Mar-2020 21:24 PM Ένα responsive οριζόντιο μενού πλοήγησης για μικρή και μεγάλη οθόνη, με css και λίγη javascript. Sticky navbar με css και javascript 28-Feb-2020 18:32 PM Έχουμε ένα οριζόντιο μενού όπου θα κολλάει στήν αρχή της σελίδας όταν κάνουμε scroll. Responsive grid layout 04-Mar-2020 17:15 PM Έχουμε μια responsive ιστοσελίδα που προσαρμόζεται σε όλες τις οθόνες Highlight selected menu page 12-Mar-2020 11:56 AM Έχουμε ένα οριζόντιο μενού όπου θα αλλάζουμε το background-color του link στην επιλεγμένη σελίδα.

javascript Tutorials

Autofill select combo box 27-Feb-2020 00:10 AM Θα δούμε πως μπορούμε να συνδυάσουμε δυο select drop-down menu έτσι ώστε επιλέγοντας το πρώτο να δίνουμε τις ανάλογες τιμές στο δεύτερο. Show hide password with javascript 10-Mar-2020 23:28 PM Ένα javascript που εμφανίζει τα γράμματα όταν πληκτρολογούμε στο πεδίο password. javascript and css slideshow 21-Feb-2020 01:27 AM Slideshow με fade effect, κείμενο, cta button, και responsive design γραμμένο σε css και javascript Image preview with javascript 19-Feb-2020 16:04 PM Άμεση απεικόνιση της εικόνας σε file upload ενέργεια

php Tutorials

Register form with php and ajax 24-Feb-2020 16:39 PM Εχουμε μια φόρμα εγγραφής στην οποία τα δεδομένα θα σταλούν με Ajax στο php αρχείο για επικύρωση. Image upload with php 17-Feb-2020 18:17 PM Σε αυτό το tutorial θα ανεβάσουμε μια φωτό στον server, και θα επικυρώσουμε (validate) αν η φωτό είναι έγκυρη.
Contact form validation with php 16-Mar-2020 00:54 AM Θα επικυρώσουμε μια φόρμα επικοινωνίας με php, και θα εισάγουμε τις τιμές σε μια βάση δεδομένων. Image resizing with php 09-Mar-2020 19:16 PM Ενα php script για να τροποποιούμε τις διαστάσεις των φωτόγραφίων κατά το upload. Uploading an article with image 01-Mar-2020 22:13 PM Έχουμε μια φόρμα με τρία πεδία, τίτλο,άρθρο, και εικόνα, θα ανεβάσουμε την εικόνα στον server και θα εισάγουμε τα στοιχεία σε μια mysql βάση.

webDev Αναφορές

PHP Net Το σπίτι της php είναι η πιο έγκυρη πηγή εκμάθησης. Javascript Μozilla MDN web docs Τα πάντα για την Javascript. Όρεξη να έχεις να διαβάζεις. CSS Μozilla MDN web docs Απο βασικά styles εως animation, εδω θα τα μάθεις όλα. Programming Notes for Professionals Μια φοβερή συλλογή από PDF αρχεία, από Android εώς C++. Αξίζει να κατεβάσετε και να μελετήσετε τα αρχεία.

PHPDev Tutorials | Site developed by PHPDev.gr Visit PHPDev

scrollTo('top')