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

Posted 2023-05-08

【中文标题】在导航栏上切换不透明度动画

【英文标题】：Toggle opacity animation on nav bar

【发布时间】：2016-02-14 11:38:06

【问题描述】：

目标：当导航栏到达滚动条上的某个位置时，为导航栏提供不透明度。 到目前为止，它可以在加载时工作，但是当向上滚动时，不透明度不会回到 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();

  );

【问题讨论】：

请提供一个小提琴的例子...

jsfiddle.net/#&togetherjs=bNrSRViwmB

【参考方案1】：

在使用过您的代码后，问题似乎与动画、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();
);

【讨论】：

@KhalilLajmi 没问题，如果我的回答对您有帮助的话，如果您将其标记为已接受，那就太好了