我希望标头在滚动时缩小,如果将鼠标悬停在上方,则调整大小,在鼠标离开时返回缩小状态(如果这是一个语法正确的句子)。

我的问题是,即使没有滚动页面,我的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/

10-07 19:30
查看更多