Что-то вроде медиа-запроса для Java Script?

Nov 04 2020

Недавно я задавал этот вопрос об изменении размера заголовка, и кто-то дал мне JavaScript, который отлично работает, пока не доходит до изменения размера и использования медиа-запроса, когда я прокручиваю вверх (с меньшим размером экрана, что означает меньший размер шрифта по умолчанию) javascript измените размер шрифта обратно на размер по умолчанию.

Вот мой код (здесь почему-то не работает, но в моем коде работает)

Вопрос: как мне изменить этот Java-скрипт, чтобы он как-то реагировал?

    var scrollCn = function(quantity)
{
  var scrollTop = (window.pageYOffset || document.scrollTop)  - (document.clientTop || 0);
  
  var size = 25 - ((scrollTop / quantity) || 0);
  if(size <= 15) size = 15;

/*   var size = 20 - ((scrollTop / quantity) || 0);
  if(size <= 10) size = 10; 
  
  Something i have tried-not working :D 
  */ 
  
  document.querySelector('.bignadpis p').setAttribute('style', 'font-size: '+size+'px;');

};
window.addEventListener('scroll', function(){ scrollCn(10) });
body {
    height: 3000px;
}

.bignadpis {
    max-width: 500px;
    z-index: 10001;
    font-family: 'Paytone One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
    text-transform: uppercase;
    position: fixed;
    float: left;
    padding-left: 5%;
}

@media screen and (max-width:1400px) {
    .bignadpis {
        max-width: 400px;
        font-size: 20px;
    }
}
<div class="bignadpis">
           <p>Účtovníctvo a zúčtovanie zdravotnej starostlivosti Svit</p>
        </div>

Ответы

s.kuznetsov Nov 04 2020 at 04:30

Я немного изменил ваш код. Добавлено условие ширины окна браузера. Он работает как медиа-запрос. Это было необходимо?

if( window.innerWidth <= 1400 ){
      var size = 20 - ((scrollTop / quantity) || 0);
      if(size <= 10) size = 10; 
} 

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

};
window.addEventListener('scroll', function(){ scrollCn(10) });
body {
    height: 3000px;
}

.bignadpis {
    max-width: 500px;
    z-index: 10001;
    font-family: 'Paytone One', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 25px;
    text-transform: uppercase;
    position: fixed;
    float: left;
    padding-left: 5%;
}
}

@media screen and (max-width:1400px) {
    .bignadpis {
        max-width: 400px;
        font-size: 20px;
    }
}
<div class="bignadpis">
           <p>Účtovníctvo a zúčtovanie zdravotnej starostlivosti Svit</p>
        </div>