$(window).on('scroll' does not fire with the slidebars.css

[Haluk Karamete]

Dear Adam,

I got this code ( which used to work before slidebars integration ) and it still works but only when slidebars.css is empty! Obvoiusly, there is a conflict in there.

$(window).on('scroll', function(){
	//alert('this does not fire anymore! unless slidebars.css is empty');
	if( $(window).scrollTop()>50 ){
		$('.navbar-plain').addClass('plain-nav-fixed');
	} 
	else {
		$('.navbar-plain').removeClass('plain-nav-fixed');
	}
});

This snippet as you'd figure out, fixes the navbar to the top once the scrolling starts.

The problem is window scrolling is not detected anymore.

What would you recommend that I change the above code to?

My header area ( on canvas area ) starts like this:

[body id='the_body']

[div canvas="container" id='full-content-div']
..... my content goes here
[/div]

[Haluk Karamete]

It's actually this css instruction that prevents the detection of window.scroll.

body {
width: 100%;
height: 100%;
}

I guess with that premise, there is no possibility of scroll and hence the reason for not firing that event.

My solution would be to figure out the proper replacement of these:

$(window).on('scroll', function(){
and
if( $(window).scrollTop()>50 ){

Instead of listening the scroll event on the window object, I must listen it within [div canvas="container" id='full-content-div'] which I'm not sure how.

[Haluk Karamete]

I also created a stackoverflow question on this subject in more generic terms.
http://stackoverflow.com/questions/40495793/detecting-scroll-event-on-a-page-scoped-div

[Haluk Karamete]

I solved my own problem, posting the solution for what its worth.

$("#full-content-div").scroll(function() { // full-content-div is the div where container="canvas" is. I just gave that div an id. 

    var the_content = document.getElementById('full-content-div');

    var scrollPosition = JSON.stringify( getTopPosition( the_content ) ); // see the function that gets you the scroll position 

    if (scrollPosition > 0) {

        $('.my-nav-bar').addClass('my-nav-bar-fixed');

    } else {

        $('.my-nav-bar').removeClass('my-nav-bar-fixed');

    }

});


// the helper function referenced above
function getTopPosition(el){
    // returns the scroll position of the element when $(window).scrollTop() fails to give you results
    for (var pos=[0,0];el;el=el.offsetParent){
        pos[1] +=  el.offsetTop-el.scrollTop;
    }
    return -1 * pos[1]; 
}