1

I am a little new to JQuery and I am trying to make a div at the bottom of the page fade in when the page loads and then when a user starts to scroll the div needs to fade out and then reappear when scrolling back to the top.

The code I have done just to fade the div in isn't working and can be seen here http://jsfiddle.net/DeZnT/

The jQuery I am using is

$(document).ready(function () {
    $(function(){
         $(".other_product_links").animate({bottom:'0px'});
      });
});

Thank you in advance for your time and assistance.

1
  • Try $(".other_product_links").fadeIn(1000); Jun 11, 2013 at 15:10

2 Answers 2

7

To fade in (There's also a corresponding fadeOut method):

$("#element").fadeIn(300);

For detecting how far down a user has scrolled, you can use something like this:

$(document).ready(function(){
    $(window).scroll(function(){
        var posFromTop = $(window).scrollTop();

        if(posFromTop > 200){
        // if more than 200px from the top do something


        } else {
        // otherwise do something else.

        }
    });
});
0
1

The first step is to remove the display:none from your class, and set the bottom position to start below the page (which is 0 minus the div height).

.other_product_links {
  height: 200px;
  width:100%;
  opacity: 0.8;
  background: #ffd6fd;
  border-top: 2px solid #f095d9;
  position: fixed;
  bottom: -200px;

}

Then, all your jQuery needs to do is move the bottom to 0.

$(".other_product_links").animate({bottom: '0px'}, 1000);

That gets you half-way. I've not done the scrolling part before.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.