# A better way to implement custom jQuery code?
**URL:** https://meta.discourse.org/t/a-better-way-to-implement-custom-jquery-code/180056
**Category:** Development
**Created:** [February 17, 2021, 3:18pm UTC](https://meta.discourse.org/t/a-better-way-to-implement-custom-jquery-code/180056 "2021-02-17T15:18:04Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [February 17, 2021, 3:18pm UTC](https://meta.discourse.org/t/a-better-way-to-implement-custom-jquery-code/180056/1 "2021-02-17T15:18:04Z")
I’m having an issue with my jquery code, not being always triggered.
What I’m trying to do is to toggle a class when the user scrolls more than 70px. It works fine but not always.
For example, sometimes after editing a topic or creating/editing a category and then clicking the logo to go back to the homepage, the code won’t work unless I’ll refresh the page.
I could also use the native docker class, but in my example is added only after scrolling the entire hero section’s height, and I want the class to be added sooner.
So is there a better way of including custom jquery codes in a discourse theme?
The code I’m using:
```
$(function() {
//caches a jQuery object containing the header element
var header = $("body.categories-list .d-header-wrap, body.navigation-topics .d-header-wrap");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 70) {
header.addClass("cd-active");
} else {
header.removeClass("cd-active");
}
});
});
```
Testing theme:
[https://theme-creator.discourse.org/?preview\_theme\_id=4529](https://theme-creator.discourse.org/?preview_theme_id=4529)
---
### Author:  [@neounix](https://meta.discourse.org/u/neounix)
#### Post date: [February 17, 2021, 3:41pm UTC](https://meta.discourse.org/t/a-better-way-to-implement-custom-jquery-code/180056/2 "2021-02-17T15:41:31Z")
Discourse is an SPA, a single-page application. This also means the javascripts you add in `` only execute once on the initial page load unless you use the correct methods. You may need to change your code to fire based upon an event handler / listener.
HTH
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [February 17, 2021, 4:57pm UTC](https://meta.discourse.org/t/a-better-way-to-implement-custom-jquery-code/180056/3 "2021-02-17T16:57:27Z")
Yes, I think I should but meanwhile, I’ve found the fix. The problem was that I was using `body.categories-list` instead of `body.navigation-categories`. The `body.categories-list` is also used on subcategory pages and while I was on those pages the code wasn’t working at all ( I have no idea why ).
Edit: Still the same issue, not always working.
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [February 18, 2021, 12:44am UTC](https://meta.discourse.org/t/a-better-way-to-implement-custom-jquery-code/180056/4 "2021-02-18T00:44:53Z")
I’ve changed my code and it seems it works now but it will fire on every page. In my previous code, I was trying to isolate the code only on the `.navigation-categories` and `.navigation-topics` pages but probably this is the problem. Anyway, all help is appreciated. Thanks.
```
$(function() {
$(window).on("scroll touchmove", function () {
if ($(this).scrollTop() > 70) {
$('.d-header-wrap').addClass('cd-active');
} else {
$('.d-header-wrap').removeClass('cd-active');
}
});
});
```