2015-06-03 141 views
0

我的客戶希望我使用模板。這一個:http://wrapbootstrap.com/preview/WB0TK5663粘滯導航欄不再工作

我一直在這裏工作了很長一段時間,我幾乎沒有任何問題。

但是,所有突然粘滯的導航欄不再工作。我無法在任何地方找到答案,它變得非常令人沮喪。

這是網站:http://soldaforte.com

只是添加位置:固定不做的工作,它必須如我在顯示的鏈接。

感謝

編輯:我確實添加了一些我的代碼直接自定義導航欄粘,但是和它的工作,當我加入了flexslider插件就停止工作。

+0

四處錯誤「遺漏的類型錯誤:無法讀取屬性‘offsetWidth’上main.js空行48」,但js代碼已經過壓縮。任何機會你有main.js的源文件? – Juank

+0

然後,flexi滑塊可能會拋出此錯誤,阻止負責粘滯導航欄的js工作。用flexislider解決問題,導航欄應該再次工作。 – Juank

+0

這裏是main.js沒有縮小http://codeshare.io/qcrBe –

回答

2

好吧我想我知道會發生什麼。我只注意到,main.js是一個谷歌地圖文件,我的猜測是默認模板使用谷歌地圖,但你沒有一個,所以它試圖創建一個地圖,但它不能。特別是與ID #gmap

在codigo.js一個元素中如果你沒有使用地圖,然後還刪除腳本標籤在HTML這些庫中刪除此

var map; 
function initialize() { 
    var mapOptions = { 
     zoom: 15, 
     center: new google.maps.LatLng(34.052234, -117.243685), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('gmap'), 
     mapOptions); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

。否則,如果您要使用地圖,請定義#gmap容器並將代碼放回。讓我們知道它的工作原理

更新

確定它缺少「滾動」類,這似乎你已經知道,基於HTML文件的滾動監聽器。將它與原始主題進行比較,就會缺少wisdom.js文件。在該文件中的航點的插件設置了這個代碼

//Header Animations 
var pageHeader = $(".page-header"); 
var pageSlider = $(".page-slider"); 
var pageAboutUS = $(".about-us"); 

pageSlider.waypoint(function (direction) { 
    if (direction == "up") { 
     pageHeader.removeClass("scrolled"); 
    } 
    else { 
     pageHeader.addClass("scrolled"); 

    } 
}, { offset: -10 }); 
pageSlider.waypoint(function (direction) { 
    if (direction == "up") { 
     pageHeader.removeClass("transition"); 
    } 
    else { 
     pageHeader.addClass("transition"); 

    } 
}, { offset: -400 }); 
pageAboutUS.waypoint(function (direction) { 
    if (direction == "up") { 
     pageHeader.removeClass("header-fixed"); 
    } 
    else { 
     pageHeader.addClass("header-fixed"); 

    } 
}, { offset: 80 }); 
pageHeader.waypoint("sticky"); 

我覺得這個可以拿回來用它再次和小提琴工作根據您的需求來定製其行爲來處理粘性導航。這是如果你需要動畫和頁面部分之間的轉換。如果你只需要一個固定的導航欄,也許你會更好,沒有航點插件,並設置導航欄只通過CSS固定。

+0

這擺脫了控制檯中的錯誤消息,但是這並沒有解決它。此外,刪除所有flexslider的痕跡也不工作。 –

+0

你能發佈到soldaforte.com,所以我可以檢查出來嗎? – Juank

+0

upvote原因是有幫助:),但問題仍然存在:(,阿雷迪更新 –

1

你需要把它添加到你的CSS:

.stuck.header-fixed { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
} 
+0

驚人的,但我只是錯過了動畫和新的大小,如在模板中,upvote爲你c: –