Question

我对javascript很新，但一直在跋涉。我现在卡住了。当用户向下滚动页面时，我试图让我的标题缩小。我已经完成了一切工作，除了我无法弄清楚如何让javascript调整这个h1（logo）元素的大小。请帮忙!!

我的javascript：

var header, yPos;
function yScroll(){
header = document.getElementById('header');
yPos = window.pageYOffset;
if(yPos > 120){
    header.style.height = "36px";
    header.style.paddingTop = "0px";
    header.style.background = "#005A31";
} else {
    header.style.height = "120px";
    header.style.paddingTop = "10px";
    header.style.background = "#A8CD1B";
}
}

我的HTML：

<div class = "container" id = "header">
STUFF HERE
<div class = "container" id = "logo">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
    </div>
STUFF HERE
 </div>

Answer 1

在你的情况下，一切都很好，但你需要将函数绑定到文档。

您可以按照以下方式执行

window.addEventListener("scroll", yScroll);

编辑：对于文本大小，您需要更改font-size属性。你正在改变高度，这是区域的高度。

您可以按照以下方式执行操作：

首先添加h1一个id。

<h1 id="myH" ...

然后

document.getElementById("myH").style.fontSize = "36px";

Javascript更改h1大小/颜色/等

1 个答案: