Question

我有一个主页，只显示一些logo和etxt以及点击它时滚动到另一页的div。

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

Answer 1

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

Answer 2

如果要滚动到navigation-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();
  }
});

Jquery在视差动画中淡入和淡出div

2 个答案: