Πώς να προσαρμόσουμε το μέγεθος του τίτλου κατά τη σκαρφαλώματα

Πώς να μειώσουμε το μέγεθος του τίτλου κατά τη σκαρφαλώματα

Πρώτο βήμα - Προσθήκη HTML:

Δημιουργία του κεφαλίου:

<div id="header">Κεφαλίδιο</div>

Δεύτερο βήμα - Προσθήκη CSS:

Ρύθμιση των στοιχείων του κεφαλίου της σελίδας:

#header {
  χρώμα υποβάθρου: #f1f1f1; /* Γκρίζο υποβάθρο */
  χώρος πλήρους: 50px 10px; /* Μερικές εσωτερικές διαστάσεις */
  χρώμα: μαύρο;
  πρόσοψη κειμένου: κέντρο;
  μέγεθος γραμματοσειράς: 90px; /* Μεγάλο μέγεθος γραμματοσειράς */
  βάρος γραμματοσειράς: διεπαναληπτικό;
  θέση: στέρεη; /* Σταθερή θέση - στον τίτλο της σελίδας */
  αρκτικότητα: 0;
  πλάτος: 100%; /* Πλήρες πλάτος */
  transition: 0.2s; /* Προσθήκη διαδραστικής επίδρασης (μικρότερο μέγεθος γραμματοσειράς κατά τη σκαρφαλώματα) */
}

Τρίτο βήμα - Προσθήκη JavaScript:

// Όταν ο χρήστης κάνει σκαρφάλωμα από την κορυφή του έγγραφου 50px προς τα κάτω, προσαρμόστε το μέγεθος του τίτλου του κεφαλίου
window.onscroll = function() {scrollFunction()};
λειτουργία scrollFunction() {
  εάν (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  } αλλιώς {
    document.getElementById("header").style.fontSize = "90px";
  }
}

Δοκιμάστε το προσωπικά