Question

我使用以下代码更改CSS：

<script>
  $(window).scroll(function(){
     { $(".numero").css("display", "none"); }
     { $(".subtitulo").css("font-size", "1em"); }
     { $("h1").css("font-size", "1.3em"); }
 });
</script>

但我不知道当我再次登顶时如何恢复到原来的CSS

Answer 1

再次将其设置为空字符串，它将使用CSS样式表。

$(window).scroll(function(){
    var topDistance = $(this).scrollTop();
    if (topDistance == 0) {
        $(".numero").css("display", ""); 
        $(".subtitulo").css("font-size", ""); 
        $("h1").css("font-size", "");
    }
});

当然，这假设这些元素在你搞砸之前没有任何内联样式。否则，您必须将它们保存在变量中并稍后重新应用它们。

Answer 2

您可以采用不同的方式解决此问题。向下滚动页面时，可以向主体添加类。滚动到页面顶部时，您可以删除相同的类。

假设我们称这个类为“滚动”。您可以将javascript重写为

$(window).scroll(function() {
  if($('body').scrollTop() > 0) 
    $('body').addClass('scrolled');
  else
    $('body').removeClass('scrolled');
});

在样式表或内联样式中，您可以定义

/* Case: Page scrolled to top */
.numero { display: <top value>; }
.subtitulo { font-size: <top value>; }
h1 {font-size : <top value>; }

/* Case: Page scrolled down */
body.scrolled .numero { display:none; }
body.scrolled .subtitulo { font-size: 1em; }
body.scrolled h1 {font-size : 1.3em; }

如何恢复原始CSS

2 个答案: