在MaterializeCSS中滚动时更改导航栏固定位置

Question

所有的拳头，对不起我的英语不好。

我有一个公司的标志在顶部和一个导航栏下来这个网站。滚动浏览公司徽标时，我想将导航栏位置更改为顶部。

我尝试用CSS来改变它：

.navbar-fixed { 
    position: relative; 
    height: 56px; 
    z-index: 1000; 
} 

到...使用Materialize.js在$（文件）。就绪

.navbar-fixed { 
    position: top; 
    height: 56px; 
    z-index: 1000; 
} 

（函数（）{}）与下一个algorhythm：

var scroll_start = 0; 
    var startchange = $('#startchange'); 
    var offset = startchange.offset(); 
    if (startchange.length){ 
     $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $(".navbar-fixed").css('position', 'top'); 
     } else { 
      $('.navbar-fixed').css('position', 'relative'); 
     } 
     }); 
    } 

但它没有奏效。

Answer 1

首先，css属性position没有top的值。

好的，这是一个脚本，需要3分钟的时间。我相信你可以很容易地改进它，让它适合你的需求。假设您的公司徽标有id="logo"：

function fixNavbar() { 
    var $logo  = $('#logo'), 
     $nav  = $('.navbar-fixed'), 
     offset  = $logo.offset(), 
     logoHeight = $logo.height(), 
     distance = offset + logoHeight, 
     scroll  = $(window).scrollTop(); 

    if (scroll >= distance) { 
    $nav.css({ 
     'position': 'fixed', 
     'top':  '0', 
     'right': '0', 
     'left':  '0' 
    }); 
    } else { 
    $nav.css({ 
     'position': 'relative', 
     'top':  'auto', 
     'right': 'auto', 
     'left':  'auto' 
    }); 
    } 
} 

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