我在其他网站上做过这个,但我似乎无法让它在这个网站上工作。当您向下滚动页面时,它应该会缩小一点,并且标题背景颜色应该变为白色。谁能告诉我为什么它不起作用?
这是我的 javascript
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 150,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
这是我的CSS-
.page-id-10 标头 {
background: transparent;
position: fixed;
text-align: left;
width: 100%;
z-index: 100;
overflow: hidden;
transition: all 0s ease 0s, all 0.25s ease 0s;
height: auto;
}
标题{
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
text-align: left;
width: 100%;
z-index: 100;
overflow: hidden;
transition: all 0s ease 0s, all 0.25s ease 0s;
height: auto;
}
header.smaller {
height: auto;
background-color: rgba(255, 255, 255, 0.4);
}
header.smaller .logo img {
max-width: 250px;
}
顶部标题部分{
width: 100%;
padding: 0 10px 0 22px;
margin: 0 auto;
}
header.smaller #access {
background-color: none;
}
header.smaller #访问一个{
line-height: 10px;
}
谢谢!!