jQuery 库干扰导航栏和可过滤投资组合的 Javascript 小问题 - bootstrap 3

Question

好的，过去 3 天我一直在试图解决这个问题，而且我非常接近！实际上，我在可过滤投资组合的几个教程之间来回切换，最终使用：

http://www.evoluted.net/thinktank/web-development/jquery-quicksand-tutorial-filtering

现在我有几个问题。

jsfiddle：http://jsfiddle.net/VeaK9/

问题 1： 我有一个 .js 文件，可以让我的导航栏在您滚动经过英雄单位后保持固定在页面顶部。现在这个文件可以工作了，但是当我包含我的可过滤投资组合所需的 .js 库时，投资组合部分或导航栏都不起作用！

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

导航栏的代码是：

$(function () {
/*    $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});

$(window).resize(function (e) {
    $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
});*/
$(document).on( 'scroll', function(){
    console.log('scroll top : ' + $(window).scrollTop());
    if($(window).scrollTop()>=$(".jumbotron").height())
    {
         $(".navbar").addClass("navbar-fixed-top");
    }

    if($(window).scrollTop()<$(".jumbotron").height())
    {
         $(".navbar").removeClass("navbar-fixed-top");
    }
});
});

问题 2： 现在第二个问题是大问题（对于其他人来说是小问题，哈哈）所以当然在我用于投资组合的教程中，没有使用引导程序！而且我不想复制教程中的所有css，所以我尝试让它与引导程序一起工作，我遇到了这个问题，图像左侧有一个额外的空间，它们实际上相互重叠一点咬一口，从容器里弹出来！

任何人都可以花点时间检查一下吗？请大声笑谢谢你们！！

Answer 1

看起来您的流沙插件使用的是非常旧的 jQuery 版本，与您使用的另一个不兼容。所以我们简单地使用Jquery Migrate Plugin 就可以了。

所以我删除了你在那个插件中使用的旧版本的 jquery，并在你的 HTML 末尾添加了这个：

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>

这是它的工作原理！

http://jsfiddle.net/hKvCN/

回答您的第二个问题

我不确定我是否完全理解第二个问题，但这是一个摇摆。

尝试改变：

<div class="container portfolio">

到

<div class="container-fluid portfolio">

如果这是你想要的行为，请告诉我