将样式应用于Javascript中事件的页脚

aemubtdh 于 2023-02-21 发布在 Java

关注(0)|答案(1)|浏览(108)

我有CSS代码：

.footer {
  font-family: "lato", sans-serif;
  padding: 20px;
  line-height: 1.2;
  text-align: right;
  background: #eee;
  color: #0D47A1;
  font-size: 13px;
  height: 80px;
  position: fixed;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  transition: all 500ms;
}

.footer.scrolled {
  transform: height(100px);
}

我想让html页面的页脚在用户向下滚动时消失。我试着用Javascript来管理它，在我的html页面中包含了脚本：

function hideFooter() {
                if(window.pageYOffset > 10) {
                    .footer.addStyleName("scrolled");
                } else {
                    .footer.removeStyleName("scrolled");
                }
        }

以及

<body onload="onload()" onscroll="hideFooter()">

使功能滚动激活。它的工作，如果我使一个警告出现，但它不适用于应用样式的页脚，我不知道为什么。

JavaScript

来源：https://stackoverflow.com/questions/75509056/apply-style-to-footer-on-event-in-javascript

1条答案

按热度按时间

b1zrtrql1#

您需要使用正确的js函数classList.add和classList.remove。

function hideFooter() {
    const footer  = document.getElementsByClassName('footer')[0];
    if(window.pageYOffset > 10) {
        footer.classList.add("scrolled");
    } else {
        footer.classList.remove("scrolled");
    }
}

此外，请看下面的链接，以查看问题和解决方案的视觉：TestWise回放|堆栈溢出QA-Apply style to footer on event in Javascript

赞(0）回复(0）举报 2023-02-21

我来回答

将样式应用于Javascript中事件的页脚

1条答案

相关问题

热门标签

最新问答