সরক্কর হলে শীর্ষকের মাপ কিভাবে পরিবর্তন করা যায়

সরক্কর হলে শীর্ষকে কিভাবে ছোট করা যায়

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

পাতার শীর্ষ তৈরি করুন:

<div id="header">Header</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

পাতার শীর্ষবন্ধনীর শৈলী নির্ধারণ করুন:

#header {
  background-color: #f1f1f1; /* গ্রীষ্মকালীন প্রকৃতি */
  padding: 50px 10px; /* কিছু অভ্যন্তরীণ মাঝারি */
  color: black;
  text-align: center; /* মধ্যবর্তী টেক্সট */
  font-size: 90px; /* বড় ফন্ট মাপ */
  font-weight: bold;
  position: fixed; /* স্থায়ী অবস্থান - পৃষ্ঠার শীর্ষে অবস্থান */
  top: 0;
  width: 100%; /* পূর্ণ প্রস্থ */
  transition: 0.2s; /* ট্রানজিশন ইফেক্ট (রোলিং হলে ফন্ট মাপ কমানো) */
}

তৃতীয় পদক্ষেপ - জেইস্ক্রিপ্ট যোগ করুন:

// যখন ব্যবহারকারী ডকুমেন্টের শীর্ষ থেকে 50px নিচে সরক্কর 50px সরক্কর করে, শীর্ষকের ফন্ট মাপ পরিবর্তন করা হবে
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header").style.fontSize = "30px";
  }
    document.getElementById("header").style.fontSize = "90px";
  }
}

亲自试一试