Question

我正在使用以下代码创建粘性导航菜单。当我向下滚动页面时（一旦它变为“固定”），我想淡化导航。我尝试过不透明度，添加和删除类，但似乎没有任何东西让我在那里......

function fixDiv() {
  var $cache = $('#menu-1'); 
  if ($(window).scrollTop() > 150) 
    $cache.css({'position': 'fixed', 'top': '0px'}).addClass("mega-fixed"); 
  else
    $cache.css({'position': 'relative', 'top': 'auto'}).removeClass("mega-fixed");

}
$(window).scroll(fixDiv);
fixDiv();

我尝试在上面的css中使用不透明度元素，并将“transition：all 1s”效果应用于添加的“mega-fixed”类。当我向下滚动页面时，效果是粘性导航中的优雅淡入淡出。但是，当向上滚动页面时，导航将消失。我可以通过代码告诉为什么会发生这种情况，但我无法纠正它......

Answer 1

能够通过jQuery Waypoints和以下代码实现这一目标：

$('body').waypoint(function() {
        $('#megamenu-1').addClass('mega-fixed').css({
            'display' : 'none'
        }).fadeIn(100);
        $('.mega-fixed').fadeOut(100);
        $('.mega-fixed').removeClass('mega-fixed').fadeIn(100);

}, {offset: -40 });

使用FadeIn和FadeOut效果创建粘滞导航

1 个答案: