CODEWITHSUNDEEP
javascriptjquerycss
Ricardo Solís
Ricardo Solís

Reputation: 13

how to restore to original CSS

The site is this: http://roobvillalobos.ga/

I change the CSS with this code:

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

But I don´t know how restore to the original CSS when I be on top again

Upvotes: 1

Views: 103

Answers (2)

Raghav Tandon
Raghav Tandon

Reputation: 469

You can approach this problem differently. You can add a class to the body when you scroll down the page. And you can remove the same class when you scroll to the top of the page.

Let's say we call this class "scrolled". You can rewrite the javascript as

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

In your stylesheet or inline style, you can define 

/* 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; }

Upvotes: 0

Lazar Ljubenović
Lazar Ljubenović

Reputation: 19764

Just set it to an empty string again, and it will use the CSS stylesheet. 

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

Of course, this assumes that these elements did not have any inline styles before you messed with them. Otherwise, you'll have to keep them in a variable and re-apply them later.

Upvotes: 4

Related Questions