div使用jquery顺利显示

时间:2017-03-18 09:02:27

标签: javascript jquery html css

我的div应该会在一段时间后顺利显示,我认为它需要一个转换脚本代码,这是我的脚本,显示800像素向下滚动后的div。

          $(document).scroll(function() {
          var y = $(this).scrollTop();
          if (y > 700) {
          $('.menu').fadeIn();
          } else {
          $('.menu').fadeOut();
          }
          });

我不知道如何在此代码中进行转换,抱歉我根本不懂javascript

1 个答案:

答案 0 :(得分:1)

为了获得更好的体验,请使用CSS过渡而不是jQuery动画。这样做的方法是使用你的滚动功能来添加/删除菜单元素中的类,而不是使用css来创建淡入效果。

例如:

<强> CSS

.menu {
    opacity: 0;
    visibility: hidden;
    transition: all .4s ease-out;
    -webkit-transition: all .4s ease-out;
}

.menu.show {
   opacity: 1;
   visibility: visible;
}

<强> JS

$(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 700) {
        $('.menu').addClass("show");
    } else {
        $('.menu').removeClass("show);
    }
});