在导航栏上切换不透明度动画

时间:2015-11-12 23:33:37

标签: javascript jquery scroll jquery-animate opacity

目标:为滚动条提供不透明度,以便在滚动条上达到特定位置。 到目前为止它适用于加载,但当向上滚动时,不透明度不会回到0。

 function navanim() {
  var window_top = $(window).scrollTop();
  var div_top = $('#news').offset().top;
  if (window_top > 500)

      $('.nav').animate({
          'opacity': '1'
      }, 500);
  else 

      $('.nav').css("opacity", 0);

  }
  $(function() {
  $(window).scroll(navanim);
  navanim();

  });

1 个答案:

答案 0 :(得分:0)

玩过你的代码后,问题可能与animate,css以及可能过于频繁调用的其他方法有关(在每个滚动条上)。

我已根据您的想法重新实现了一个小例子:

Simple example

以上jsfiddle使用以下函数通过跟踪状态来检查是否需要动画,如果是,则执行该动画。

var navAnimation = (function() {
    var news = $('#news'),
      header = $('header'),
      winTop = $(window).scrollTop(),
      newsTop = news.offset().top,
      show = winTop < newsTop;

    return function navAnimation () { 
      winTop = $(window).scrollTop(),
      newsTop = news.offset().top;

      // Don't run uneccissarily
      if (show && winTop < newsTop) return;
      if (!show && winTop >= newsTop) return;

      // If something changed, update our state
      show = winTop < newsTop;

      if (show) {
        console.log('animate!');
        header.animate({
          opacity: 1
        }, 500);
      } else {
        header.animate({
            opacity: 0
        }, 500);
      }
    };
})();

$( document ).ready(function(){
  $( window ).scroll(navAnimation);
  navAnimation();
});