在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(); 
});