/* fix max */
if(this.max == 0)
{
var ss = this.container.getScrollSize();
this.options.max = this.options.mode == 'vertical' ? ss.y : ss.x;
this.max = this.options.max;
}


was the solution.

This is the js

var ss = new ScrollSpy({
mode: 'horizontal',
onTick: function(position,state,enters,leaves) {
$("menu").style.left = -position.x+"px";
},
container: window
});


the HTML




RYAN

WHY

the css

#menu{
margin:0;
float:left;
display:block;
position:fixed;
overflow:hidden;
}
#content_wrap{
padding:34px 34px 94px 34px;
width:892px;
overflow:hidden;
margin:0 auto;
}

how can I make it so this only starts when someone scrolls horizontally (because of a small browser window or monitor) and goes “back to normal” if the screen is big enough where there are no horizontal scroll bars because the horizontal width doesn’t go past the browser size?

Thanks a lot for this great class !

Just a word : i’m not sure, but you wrote thoses lines :

/* fix max */
if(this.max == 0)
{
var ss = this.container.getScrollSize();
this.options.max = this.options.mode == 'vertical' ? ss.y : ss.x;
}


But you do not fix “this.max” but only “this.options.max”. Therefore, shouldn’t you use “this.options.max” in the rest of the code, or modify you code such as :

/* fix max */
if(this.max == 0)
{
var ss = this.container.getScrollSize();
this.options.max = this.options.mode == 'vertical' ? ss.y : ss.x;
this.max = this.options.max;
}