0

This works in Firefox and Internet Explorer, but does not work in Chrome, I have tested on multiple computers running Chrome.

Is there something I have missed that causes this not to work in Chrome?

<script>
document.addEventListener('DOMContentLoaded', function() { 
    var dealBar = function() {
        var scroll = document.documentElement.scrollTop;
        var sidebarDeals = document.querySelector('#sidebar__deals');
        var sidebarAdverts = document.querySelector('#sidebar__adverts');
        var adBottom = sidebarAdverts.offsetTop + sidebarAdverts.clientHeight;

        if (scroll > adBottom) {
            sidebarDeals.className = "sidebar__deals--fixed";
        } else {
            sidebarDeals.className = "sidebar__deals--relative";
        }       
    }

    window.addEventListener('scroll', function(e){
        dealBar();
    });
    dealBar();
});
</script>

I get no errors in the Console.

Ash
  • 792
  • 1
  • 6
  • 23

2 Answers2

1

Your code is correclty triggered when I remove the first part related to the DOMContentLoaded event: demo.

I think your problem lies here, Chrome probably executes your code after the DOM is loaded, thus your code is never executed.

Try to remove this part:

<script>
//document.addEventListener('DOMContentLoaded', function() { 
    var dealBar = function() {
        var scroll = document.documentElement.scrollTop;
        var sidebarDeals = document.querySelector('#sidebar__deals');
        var sidebarAdverts = document.querySelector('#sidebar__adverts');
        var adBottom = sidebarAdverts.offsetTop + sidebarAdverts.clientHeight;

        if (scroll > adBottom) {
            sidebarDeals.className = "sidebar__deals--fixed";
        } else {
            sidebarDeals.className = "sidebar__deals--relative";
        }       
    }

    window.addEventListener('scroll', function(e){
        dealBar();
    });
    //dealBar();
//});
</script>

Also, regarding the scroll position, you may want to check this post: JavaScript get window X/Y position for scroll

Community
  • 1
  • 1
GôTô
  • 7,974
  • 3
  • 32
  • 43
  • Tried this, but not luck. I added consolelog(1) and on scrolling it is logging 1, so must be something else in the rest of the script that Chrome doesn't like. – Ash Feb 06 '17 at 14:26
  • I just did console.log(scroll); in the function and in chrome it is returning 0. var scroll = document.documentElement.scrollTop; Is the problem in chrome, is there something there that doesn't work with chrome? – Ash Feb 06 '17 at 14:31
  • 1
    @ash I think you may find this post useful http://stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll – GôTô Feb 06 '17 at 14:36
1

Wasn't a problem with the event listener.

Changing

var scroll = document.documentElement.scrollTop;

to

var scroll = (document.documentElement.scrollTop || document.body.scrollTop);

This done the trick, seems Chrome bases its scroll position off of <body> and Firefox bases it off of <html>.

Chrome was returning 0 for scroll causing the function not to trigger the class change.

Ash
  • 792
  • 1
  • 6
  • 23