Javascript 当你向下滚动时,我如何更改我网站的标题?
我希望这样,当用户向下滚动时,标题会更改其背景,并且标题保持在窗口顶部。我不知道这是需要javascript还是可以用css来实现 我想要它看起来像什么的例子是Javascript 当你向下滚动时,我如何更改我网站的标题?,javascript,html,css,Javascript,Html,Css,我希望这样,当用户向下滚动时,标题会更改其背景,并且标题保持在窗口顶部。我不知道这是需要javascript还是可以用css来实现 我想要它看起来像什么的例子是 是的,您需要Javascript和CSS Javascript来检测您的滚动位置,并向header组件添加附加CSS类 使用附加CSS类名添加样式以更改背景颜色 在您给出的同一个示例中,他们向scroll上的“nav”组件添加了额外的css类“top nav collapse”。您可以使用开发人员工具来检查这一点。您可以使用这种代码 h
在您给出的同一个示例中,他们向scroll上的“nav”组件添加了额外的css类“top nav collapse”。您可以使用开发人员工具来检查这一点。您可以使用这种代码
html:
<nav id="header_nav">nav here</nav>
js
好了,我明白了,现在我想知道怎么做。
body {
height: 1000px;
width: 100%;
background-color: #F0F0F0;
}
#header_nav {
width: 100%;
height: 100px;
background-color: #666;
position: fixed;
top: 0;
left: 0;
}
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0) {
if($('#header_nav').data('size') == 'big') {
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else {
if($('#header_nav').data('size') == 'small') {
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}});