boni12345
boni12345

Reputation: 13

Why is my javascript (jquery) code not working on my site?

So, it's my first time designing a website and I'm trying out something:

1) When the page loads, the page is filled with an image.

2) When the user scrolls down, past the image, the menubar will become fixed.

Now I was able to make this work a few days ago. I tried adding a few things just now but the jQuery code I used stopped working. I removed my changes but it still isn't working properly.

I'll leave the CSS and jQuery codes here I guess

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

Please let me know if I'm doing anything wrong. I don't know much about this yet. Thanks!

EDIT. Okay, after posting my question I noticed that my apostrophes were auto formatted to single quotation marks. My bad. Sorry for this dumb question XD

Upvotes: 1

Views: 35

Answers (3)

Fawzan
Fawzan

Reputation: 4849

I think you have copied the JS from somewhere, Try replacing it with this.

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

Upvotes: 0

hildende
hildende

Reputation: 847

The first quote in $(‘.menubar') is not a real quote .

This will work:

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

Edit: same for .addClass and .removeClass

Upvotes: 1

Mark Eriksson
Mark Eriksson

Reputation: 1475

It's the strange quote-mark in .addClass(), the same in .removeClass(). The very first quote-mark in each one. It should be an apostrophe or a double quote-mark

Upvotes: 1

Related Questions