javascript - Jquery在视差动画中淡入淡出一个div

Question

我有一个主页，它只显示一些徽标和 etxt 以及单击它滚动到另一个页面的 div。

现在我已经完成了滚动的动画部分。我需要的是当有人点击找到你的心时，导航 div 必须作为淡入淡出效果出现。我尝试了窗口方法并获取滚动位置，但没有任何效果。

Answer 1

检查这个： http: //imakewebthings.com/jquery-waypoints/ 它可以帮助你.. :)

Answer 2

如果要滚动到导航 div，请使用以下代码：

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

如果要淡入，请先将其隐藏（例如使用 css display:none;），然后使用以下代码：

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

您可以将两者结合起来滚动到它并淡入：

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

如果用户滚动到某个位置，要淡入：

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