# 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:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![cosdesign](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cosdesign/32/208585_2.png) [@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")

</div>

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)

---

_[View the full topic](https://meta.discourse.org/t/a-better-way-to-implement-custom-jquery-code/180056)._