CODEWITHSUNDEEP
javascriptjqueryscrollfadeinfadeout
Francesca
Francesca

Reputation: 28188

FadeIn/Out based on scroll height

I have the following which should make .secondLogo appear (by fading in) when scrollToTop is past 1000px

var secondLogo = $(".secondLogo");
$(window).scroll(function(){
  //more then or equals to
  if($(window).scrollTop() >= 1000 ){
       secondLogo.fadeIn();

  //less then 1000px from top
  } else {
     secondLogo.fadeOut();

  }
});

HTML

<div class="secondLogo">
    <img src="images/smm_logo_large.png" alt="Student Makers Market logo"/>
</div>

CSS

.secondLogo{
    opacity:0;
    position:fixed;
    z-index:-10;
    top: 15%;
    left: 3%;
    opacity:0.1;
    filter:alpha(opacity=10); /* For IE8 and earlier */
}

Upvotes: 1

Views: 148

Answers (1)

kavun
kavun

Reputation: 3381

$.fn.fadeIn and $.fn.fadeOut do not manipulate the css property opacity. Initialize your element with display:none instead

.secondLogo {
    display: none;
    position: fixed;
    z-index: -10;
    top: 15%;
    left: 3%;
}

Upvotes: 2

Related Questions