0

我正在使用以下代码创建一个粘性导航菜单。我想在向下滚动页面时淡入此导航（一旦它变为“固定”）。我已经尝试过不透明度，添加和删除类，但似乎没有什么能让我很满意......

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 中使用不透明元素，并将“过渡：全 1”效果应用于添加的“mega-fixed”类。当我向下滚动页面时，效果是粘性导航的优雅淡入淡出。但是，当向上滚动页面时，导航消失了。我可以通过代码说明为什么会发生这种情况，但我无法纠正它......

4

1 回答 1

0

能够使用 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 });
于 2013-07-03T05:28:23.400 回答