Jquery fade in and out a div in parallax animation

Question

I have a home page which just shows some logo and etxt and a div on click it scroll to another page.

Now I have done the animation part of scrolling. What I need is when someone click on FIND YOUR HEART the nav div must come as a fade in effect. I tried window method and take the scroll position, but nothing works.

Answer 1

if you want to scroll to the navigation-div use this code:

$("#findYourHeartDiv").click(function() {
  $('html, body').animate({
    scrollTop: ($("#navDiv").offset().top)
  }, 800);
});

If you want to fade it in, hide it first (e.g. with css display:none;), then use this code:

$("#findYourHeartDiv").click(function() {
  $("#navDiv").fadeIn(); 
});

You can combine both to scroll to it and fade it in:

$("#findYourHeartDiv").click(function() {
    $('html, body').animate({
      scrollTop: ($("#navDiv").offset().top)
    }, 
    500,
    function() {
      //animation complete function
      $("#navDiv").slideDown();
    });
});

To fade in if the user scrolls to a position:

$(window).bind("scroll", function () {
  var wintop = $(window).scrollTop(); // the scroll position
  if(wintop>$("#navDiv").offset().top) {
    $("#navDiv").fadeIn();
  }
  else {
    $("#navDiv").fadeOut();
  }
});