Question

您好，我有一个脚本，可以很好地用于在向下滚动和向后滚动时调整徽标的大小，但是当屏幕尺寸小于600px时，我不希望它执行此操作。我该如何更改以实现此功能，因此不胜感激。

// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("header-logo").style.width = "180px";
 } 
   else {
   document.getElementById("header-logo").style.width = "215px";
 }

}

Answer 1

您可以做类似的事情

if (screen.width > 600px){
    //your code
}

Answer 2

您可以使用media queries来实现

@media (max-width: 600px) {
  #header-logo {
    width: 180px !important;//!important use to override inner html styles 
  }
}

Answer 3

有些运气，并且使用了一些DoomBots代码，使其可以与以下代码一起使用 //当用户从文档顶部向下滚动50px时，请调整标题的字体大小 window.onscroll = function（）{scrollFunction（）};

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 || 
screen.width < 600) {
    document.getElementById("header-logo").style.width = "180px";
  } 
    else {
       if (screen.width > 600){
       document.getElementById("header-logo").style.width = "215px";
 }
 }

}

调整滚动条上徽标的大小

3 个答案: