Question

所以，这是我第一次设计一个网站而且我正在尝试一些东西：

1）页面加载时，页面会显示图像。

2）当用户向下滚动，经过图像后，菜单栏将固定。

现在我能够在几天前完成这项工作。我刚刚尝试添加一些东西但是我使用的jQuery代码停止了工作。我删除了我的更改，但仍然无法正常工作。

我会在这里留下CSS和jQuery代码

CSS

#homepic {
  height: 100%;
  width: 100%;
  background-image: url(images/a.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

.menubar {
  height: 60px;
  width: 100%;
  background-color: rgba(0,0,0,0.5);
}

.fixed {
  position: fixed;
  top: 0;
}

#blah {
  height: 1000px;
  width: 100%;
  margin: 10px 10px 10px 10px;
}

的jQuery

$(window).scroll(function () {
    var windowHeight = window.innerHeight;
    ($(window).scrollTop() > windowHeight) ? $(‘.menubar').addClass(‘fixed') : $(‘.menubar').removeClass(‘fixed');
});

如果我做错了，请告诉我。我对此还不太了解。谢谢！

EDIT。好的，在发布我的问题之后，我注意到我的撇号被自动格式化为单引号。我的错。对不起这个愚蠢的问题XD

Answer 1

这是.addClass()中的奇怪引号，与.removeClass()中的相同。每个人的第一个引号。它应该是撇号或双引号

Answer 2

$(‘.menubar')中的第一个引语不是真正的引用。

这将有效：

$(window).scroll(function () {
    var windowHeight = window.innerHeight;
    ($(window).scrollTop() > windowHeight) ? $('.menubar').addClass(‘fixed') : $(‘.menubar').removeClass(‘fixed');
});

编辑：同样适用于.addClass和.removeClass

Answer 3

我认为你已经从某处复制了JS，尝试用它替换它。

$(window).scroll(function () {
    var windowHeight = window.innerHeight;
    ($(window).scrollTop() > windowHeight) ? $('.menubar').addClass('fixed') : $('.menubar').removeClass('fixed');
});

为什么我的javascript（jquery）代码无法在我的网站上运行？

3 个答案: