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

Question

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>

Leave a Comment Cancel Reply