Question

我的客户希望我使用模板。这一个：http://wrapbootstrap.com/preview/WB0TK5663

我已经在这里工作了很长时间，我几乎没有任何问题。

然而，突然间粘性导航栏不再起作用了。我无法在任何地方找到答案，而且非常令人沮丧。

以下是网站：http://soldaforte.com。

只是添加位置：固定不执行任务，它必须与我显示的链接一样。

由于

编辑：我添加了一些我的代码来直接自定义粘性导航栏，并且它已经工作了，但是当我添加了flexslider插件时它停止了工作。

Answer 1

好的，我想我知道可能会发生什么。我刚刚注意到main.js是谷歌地图文件，我的猜测是默认模板是使用谷歌地图，但你没有，所以它试图创建一个地图，但它不能。特别是在id为#gmap

的元素中

在codigo.js中删除此

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);

如果您不使用地图，则还要删除html中这些库的脚本标记。否则，如果您要使用地图，请定义#gmap容器并将代码放回原处。如果有效，请告诉我们

<强>更新

好吧它缺少'滚动'类，看起来你已经知道基于html文件上的滚动监听器了。将其与原始主题进行比较，缺少wisdom.js文件。在此文件中，waypoints插件设置为使用此代码处理粘性导航

//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将导航栏设置为固定。

Answer 2

您需要将此添加到您的css：

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

粘性导航栏不再工作

2 个答案: