Question

我有一个使用jQuery的粘性导航栏，它在CodePen上运行得很好。但是我现在将它添加到我的html / js文件中并且它不再正常工作。我的CodePen和我的文件之间的唯一区别是我的第一部分中有Particleground（如CodePen所示）。所以我的javascript文件看起来像这样：

// particleground
document.addEventListener('DOMContentLoaded', function () {
 particleground(document.getElementById('particles'), {
  dotColor: '#E5E8E8',
  lineColor: '#E5E8E8',
  density: 5500
 });
 var intro = document.getElementById('intro');
 intro.style.marginTop = - intro.offsetHeight / 2 + 'px';
}, false);

//sticky navbar
(function($) {
  "use strict";

  var $navbar = $("#navbar"),
    y_pos = $navbar.offset().top,
    height = $navbar.height();

  $(document).scroll(function() {
    var scrollTop = $(this).scrollTop();

    if (scrollTop > y_pos + height) {
        $navbar.addClass("navbar-fixed").animate({
            top: 0
        });
    } else if (scrollTop <= y_pos) {
        $navbar.removeClass("navbar-fixed").clearQueue().animate({
            top: "-48px"
        }, 0);
    }
});

})(jQuery, undefined);

我的HTML标题按此顺序排列：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="js/jquery.particleground.min.js"></script>
    <script src="js/jquery.particleground.js"></script>

当我运行页面时，Particleground工作正常但滚动条不再像我的CodePen那样移动了。问题是因为我的js文件中有particleground和棒状导航栏吗？我不确定问题是什么以及如何解决这个问题？

粘性导航栏jQuery无法在js文件

0 个答案: