Javascript 如果站点已滚动，则显示徽标

我有一个带有标志的标题。只有当网站已滚动时，此徽标才会出现

我在javascript中尝试了这一点：

if(document.getElementById("div").scrollTop != 0){
  document.write("<img src='logo.jpg'>");
}

if（document.getElementById（“div”）.scrollTop！=0）{
文件。填写（“”）；
}

但这并不奏效

---

如何实现它？

您需要在窗口中添加一个scrollListener，以便在用户滚动时执行代码。 您的代码仅在页面加载时执行

有关Eventlisteners的信息：

---

请注意，每次用户滚动时都会触发该事件。

您需要在窗口中添加一个scrollListener，以便在用户滚动时执行代码。 您的代码仅在页面加载时执行

有关Eventlisteners的信息：

---

请注意，每次用户滚动时都会触发事件。

使用

窗口。添加EventListener（“滚动”，回调）

，然后将值

“块”

设置为

img

的属性

window.addEventListener（'scroll'，函数（e）{
if（document.getElementsByTagName（“html”）[0].scrollTop>5）{
document.getElementsByClassName（'imgHeader'）[0].style.display=“block”；
}否则{
document.getElementsByClassName（'imgHeader'）[0].style.display=“无”；
}
});
.imgHeader{
高度：100px；
宽度：100px；
显示：无；
}
div{
高度：1000px；
}
标题{
位置：固定；
排名：0；
宽度：100%；
}
使用
窗口。添加EventListener（'scroll'，callback）
，然后将值
“block”
设置为
img
的属性


window.addEventListener（'scroll'，函数（e）{
if（document.getElementsByTagName（“html”）[0].scrollTop>5）{
document.getElementsByClassName（'imgHeader'）[0].style.display=“block”；
}否则{
document.getElementsByClassName（'imgHeader'）[0].style.display=“无”；
}
});
.imgHeader{
高度：100px；
宽度：100px；
显示：无；
}
div{
高度：1000px；
}
标题{
位置：固定；
排名：0；
宽度：100%；
}

试试这个


$（文档）.on（“滚动”，函数（）{
如果（$（文档）.scrollTop（）>5）{
$（“.down top header”）.addClass（“show class”）；
}否则{
$（“.down top header”）.removeClass（“show class”）；
}
});
.content{
高度：500px；
}
.表演课{
位置：固定；
显示：块！重要；
}
.隐藏类{
显示：无；
}

形象
试试这个


$（文档）.on（“滚动”，函数（）{
如果（$（文档）.scrollTop（）>5）{
$（“.down top header”）.addClass（“show class”）；
}否则{
$（“.down top header”）.removeClass（“show class”）；
}
});
.content{
高度：500px；
}
.表演课{
位置：固定；
显示：块！重要；
}
.隐藏类{
显示：无；
}

形象
不幸的是，我认为您必须使用一些JavaScript使其按您的意愿工作

下面是一个简单的片段来展示我使用的原则：


从
html
中已有的徽标开始，但在其CSS中使用
display:none
使用
window.addEventListener（'scroll'，callback）
在向下滚动页面时将
display:none
更改为
display:block
（即
document.documentElement.scrollTop>0
）


var logo=document.getElementById（'logo'）；
window.addEventListener（'scroll'，函数（e）{
如果（document.documentElement.scrollTop>0）{
logo.style.display='block'；
}else logo.style.display='none'；
});
#徽标{
显示：无；
位置：固定；
排名：0；
背景：#aaa；
}
#页面{
背景：ddd；
高度：2000px；
}

页面开始时请尝试向下滚动
，不幸的是，我认为您必须使用一些JavaScript使其按您的意愿工作

下面是一个简单的片段来展示我使用的原则：


从
html
中已有的徽标开始，但在其CSS中使用
display:none
使用
window.addEventListener（'scroll'，callback）
在向下滚动页面时将
display:none
更改为
display:block
（即
document.documentElement.scrollTop>0
）


var logo=document.getElementById（'logo'）；
window.addEventListener（'scroll'，函数（e）{
如果（document.documentElement.scrollTop>0）{
logo.style.display='block'；
}else logo.style.display='none'；
});
#徽标{
显示：无；
位置：固定；
排名：0；
背景：#aaa；
}
#页面{
背景：ddd；
高度：2000px；
}

页面的开头
尝试向下滚动
“它不必是javascript。”。。。不幸的是，此时此刻，使用javascript是跨浏览器完成任务的唯一真正可靠的方法。。。不幸的是，此时此刻，使用javascript是跨浏览器完成任务的唯一可靠方法。为什么使用jQuery？因为她/他可以。为什么使用jQuery？因为她/他可以。
window.addEventListener('scroll', function(e) {
    //do something as soon as the window was scrolled
});