我希望标头在滚动时缩小,如果将鼠标悬停在上方,则调整大小,在鼠标离开时返回缩小状态(如果这是一个语法正确的句子)。
我的问题是,即使没有滚动页面,我的noob代码也会在鼠标离开时缩小标题,而我不希望那样。预防这种情况的最佳方法是什么?
谢谢,请仁慈谦虚的菜鸟。
http://jsfiddle.net/ex_jedi/nam3tnxL/1/
的HTML
<header class="header"><h1>Shrinking Header</h1></header>
的CSS
.header{
position: fixed;
width: 100%;
text-align: center;
font-size: 25px;
height: 110px;
background: #335C7D;
color: #fff;
font-family: sans-serif;
transition: all 0.8s ease;
}
.scroll {
font-size: 8px;
height: 50px;
background: #efc47D;
text-align: left;
}
jQuery的
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.header').addClass("scroll");
}
else{
$('.header').removeClass("scroll");
}
});
$('.header').mouseenter(function() {
$('.header').removeClass("scroll");
});
$('.header').mouseleave(function() {
$('.header').addClass("scroll");
});
最佳答案
更换
$('.header').addClass("scroll");
与
if($(window).scrollTop() > 1){
$('.header').addClass("scroll");
}
这是修改过的小提琴:http://jsfiddle.net/nam3tnxL/4/