jQuery hide/在页面上显示徽标

Question

我无法使我的功能正确运行。在一定高度上，它应该将徽标动画到页面上。但是，在我的if语句中，当我滚动时，它不会返回到页面上的隐藏

这是我的功能。

$(window).scroll(function(){
if ($(window).scrollTop() > 250) {
  //$('#logo').show( 'slow' );
  //$("#logo").css('left', function(){ return $(this).offset().left; })
  //.animate({"left":"30"}, "slow");
  $("#logo").animate({left: "30"});
}
else {
  $("#logo").animate({left: "0"});
}

这是我的#logo的CSS

#logo {
  display: block;
  height: 50px;
  padding-top: 15px;
  margin-top: -15px;
  position: absolute;
  left: -493px;
}

Answer 1

这可以通过不同的方式来接近，您可以根据页面滚动的高度添加或删除类，并使用CSS样式宽度，可见性或左位，或者您可以编辑此属性使用jQuery css()功能。

但是，如果您想使用animate()，这可以帮助您：

$(window).scroll(function(){
  if ($(window).scrollTop() > 250) {
    $("#logo").animate({width: 0}, 20);
  }
  else {
    $("#logo").animate({width: 50}, 20);
  }
 });

以您的样式删除DE left属性并设置position: fixed

我建议通过课程和CSS