# How to Intercept page scroll event

**URL:** https://meta.discourse.org/t/how-to-intercept-page-scroll-event/44069
**Category:** Development
**Created:** [May 11, 2016, 6:15pm UTC](https://meta.discourse.org/t/how-to-intercept-page-scroll-event/44069 "2016-05-11T18:15:03Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![itkin](https://avatars.discourse-cdn.com/v4/letter/i/22d042/32.png) [@itkin](https://meta.discourse.org/u/itkin)
#### Post date: [May 11, 2016, 6:15pm UTC](https://meta.discourse.org/t/how-to-intercept-page-scroll-event/44069/1 "2016-05-11T18:15:03Z")

</div>

Hello,

I’d like to add a little script to trigger a function when the header logo changes (when the window is scrolled down).

Well i’m pretty lost at it, being a total newbie to ember and its ecosystem…

Do you which file handle i have to look at, or (what would be so cool) how to do such a thing in “the discourse way” ?

Many Thanks !!

---

<div class="post-metadata">

### Author: ![itkin](https://avatars.discourse-cdn.com/v4/letter/i/22d042/32.png) [@itkin](https://meta.discourse.org/u/itkin)
#### Post date: [May 11, 2016, 11:15pm UTC](https://meta.discourse.org/t/how-to-intercept-page-scroll-event/44069/2 "2016-05-11T23:15:18Z")

</div>

seems to be in views/topic.js.es6  
` if (showTopic) { this.appEvents.trigger('header:show-topic', topic); } else { this.appEvents.trigger('header:hide-topic'); }`  
Anybody knows how to intercept such event ?

---

<div class="post-metadata">

### Author: ![itkin](https://avatars.discourse-cdn.com/v4/letter/i/22d042/32.png) [@itkin](https://meta.discourse.org/u/itkin)
#### Post date: [May 12, 2016, 9:13am UTC](https://meta.discourse.org/t/how-to-intercept-page-scroll-event/44069/3 "2016-05-12T09:13:44Z")

</div>

Got it, for anyone in the same case you need to add the following script into the body (via the admin interface)

```
<script type="text/javascript">
    Discourse.initializer({
      name: 'custom-header',

      initialize: function(application) {
        
        application.registrations['app-events:main']
            .on('header:show-topic', function(e){ 
                $('#top-navbar').css('zIndex',0) 
            })
            .on('header:hide-topic', function(e){ 
                $('#top-navbar').css('zIndex',1001) 
            })
      }
   });
</script>

```

---

<div class="post-metadata">

### Author: ![simevo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simevo/32/43605_2.png) [@simevo](https://meta.discourse.org/u/simevo)
#### Post date: [April 12, 2017, 8:03am UTC](https://meta.discourse.org/t/how-to-intercept-page-scroll-event/44069/4 "2017-04-12T08:03:42Z")

</div>

Does not work here on v1.8.0.beta9 +21, on this line:

> [@itkin](#):
>
> ```plaintext
> application.registrations['app-events:main']
> 
> ```

I get this:

```plaintext
TypeError: Cannot read property 'app-events:main' of undefined
    at Object.initialize ((index):482)
    at _ember_jquery-b018f0a….js:14340
    at e.each (_ember_jquery-b018f0a….js:12426)
    at e.topsort (_ember_jquery-b018f0a….js:12393)
    at e.topsort (_ember_jquery-b018f0a….js:12338)
    at i._runInitializer (_ember_jquery-b018f0a….js:14367)
    at i.runInitializers (_ember_jquery-b018f0a….js:14335)
    at i._bootSync (_ember_jquery-b018f0a….js:13550)
    at i.domReady (_ember_jquery-b018f0a….js:13454)
    at p.run (_ember_jquery-b018f0a….js:10544)

```

any idea ?

---

<div class="post-metadata">

### Author: ![loginerror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/loginerror/32/156605_2.png) [@loginerror](https://meta.discourse.org/u/loginerror)
#### Post date: [August 27, 2020, 12:40pm UTC](https://meta.discourse.org/t/how-to-intercept-page-scroll-event/44069/5 "2020-08-27T12:40:15Z")

</div>

I had the same error, but managed to fix it by including this in my script definition:

```plaintext
<script type="text/discourse-plugin" version="0.10.2">

```