Javascript收缩头

我正在尝试创建一个缩小的标题。我试过下面的例子，但不起作用。我想在向下滚动时缩小标题元素。标题应逐像素缩小，如果达到80像素的高度，则应停止缩小。 这是我想要的一个例子：

谢谢你的帮助

window.onscroll=function（）{header\u scroll（）}；
函数标题_scroll（）{
if（document.documentElement.scrollTop>1 | | document.body.scrollTop>1）{
document.getElementById（'page'）.classList.add（“smallheader”）；
}
否则{
document.getElementById（'page'）.classList.remove（“smallheader”）
}
}

#标题{
宽度：100%；
高度：100px；
位置：固定；
排名：0；
背景颜色：绿色；
过渡：0.4s；
z指数：5；
}
.smallheader#header{
高度：50px；
}

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

这应该是您想要的行为

$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=80）{
$（“#页眉”）.addClass（“小页眉”）；
} 
否则如果（滚动<80）{
$（“#header”）.removeClass（“smallheader”）；
}
});
#标题{
宽度：100%；
高度：100px；
位置：固定；
排名：0；
背景颜色：绿色；
过渡：0.4s；
z指数：5；
}
#header.smallheader{
高度：80px；
}

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容
内容

这应该是您想要的行为


$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=80）{
$（“#页眉”）.addClass（“小页眉”）；
} 
否则如果（滚动<80）{
$（“#header”）.removeClass（“smallheader”）；
}
});
#标题{
宽度：100%；
高度：100px；
位置：固定；
排名：0；
背景颜色：绿色；
过渡：0.4s；
z指数：5；
}
#header.smallheader{
高度：80px；
}

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容
内容

我现在找到了自己的解决方案：


window.onscroll=function（）{
var pixel=window.scrollY；
var newheader=200-pixel；//100是标题的上限，我无法使用document.getelementById，因为有一些奇怪的问题
如果（newheader>70）{//70它是头的最小高度
document.getElementById（'header'）.setAttribute（“样式”，“高度：”+newheader+“px”）；
}
}
#标题{
宽度：100%；
高度：200px；
位置：固定；
排名：0；
背景颜色：绿色；
}

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

内容

我现在找到了自己的解决方案：


window.onscroll=function（）{
var pixel=window.scrollY；
var newheader=200-pixel；//100是标题的上限，我无法使用document.getelementById，因为有一些奇怪的问题
如果（newheader>70）{//70它是头的最小高度
document.getElementById（'header'）.setAttribute（“样式”，“高度：”+newheader+“px”）；