Question

我希望我的标题在滚动时收缩，如果它被鼠标悬停并且在鼠标离开时返回缩小（如果这是一个语法正确的句子）则调整大小。

我的问题是，即使页面没有滚动，我的noob代码也会使鼠标离开时标题缩小，我不想这样做。什么是阻止这种情况的最好方法？

谢谢，请谦虚地对待一个卑微的菜鸟。

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");
});

Answer 1

替换

$('.header').addClass("scroll");

与

     if($(window).scrollTop() > 1){
        $('.header').addClass("scroll");
     }

这里是修改过的小提琴：http://jsfiddle.net/nam3tnxL/4/

Answer 2

Prakhar已经很好地回答了这个问题，但是认为值得一提的是jQuery .hover()是在同一元素上使用mouseenter和mouseleave时的捷径。例如：

$('.header').hover(function() {
    $('.header').removeClass("scroll");
  }, function() {
    if($(window).scrollTop() > 1) {
      $('.header').addClass("scroll");
    }
  }
);

示例添加到Prakhar的小提琴：http://jsfiddle.net/nam3tnxL/5/

如果你已经使用了jQuery，它可能会使代码更加易于管理：）

滚动和鼠标事件动画标题

2 个答案: