how can i make text in a header smaller when the user scrolls down?

This may be the result you are looking for.

By manipulating the quantity value, you can determine yourself when it reaches “15px“.

var scrollCn = function(quantity)
{
  var scrollTop = (window.pageYOffset || document.scrollTop)  - (document.clientTop || 0);
  
  var size = 30 - ((scrollTop / quantity) || 0);
  
  if(size <= 15) size = 15;
  
  document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');


};
window.addEventListener('scroll', function(){ scrollCn(10) });
.bignadpis {
z-index: 10001;
font-family: 'Paytone One', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
text-transform: uppercase;
position: fixed;
float: left;
padding-left: 5% }

html
{
  height: 2000px;
}
<div class="bignadpis">
        <p>Účtovníctvo a zúčtovanie <br> zdravotnej starostlivosti Svit</p>
    </div>

For your second question

var scrollCn = function(quantity)
{
  var scrollTop = (window.pageYOffset || document.scrollTop)  - (document.clientTop || 0);
  
  var size = 30 - ((scrollTop / quantity) || 0);
  
  if(size <= 15) size = 15;
  
  document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');


};
window.addEventListener('scroll', function(){ scrollCn(10) });
.bignadpis {
max-width: 400px;
z-index: 10001;
font-family: 'Paytone One', sans-serif;
font-style: normal;
font-weight: normal;
font-size: 30px;
text-transform: uppercase;
position: fixed;
float: left;
padding-left: 5% }

html
{
  height: 2000px;
}
<div class="bignadpis">
        <p>Účtovníctvo a zúčtovanie zdravotnej starostlivosti Svit - And more string you want!</p>
    </div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top