Horizontal scroll not working when the fixed top menu bar has content wider than available browser window width.

[amarnath01]

Hi, Thanks for the awesome plugin which works in almost all scenarios. However I have a corner case scenario, and would really appreciate any help on resolving this.

Problem: I have a top menu bar which takes up 100% width of the browser window. This has logo on one end and logout link on the other. Also this bar sometimes expands beyond the browser default width (min width=1024px), because of the its dynamic inner contents. The issue is that the page's horizontal browser bar does not appear when the top menu bar is bigger than the browser window. Hence I am not able to access the 'log out' and other links on the extreme ends.

In other words.. if ( $('.header-wrap').width() >= $(window).width() ) I need a horizontal scroll.

Also I have noticed that if I manually slightly resize the browser window, everything magically goes fine and I get the horizontal scroll.

Also I have tried using 'dontsetWidth', ' window.resize' , 'postFixed' function handlers, however these don't seem to help. Calling $(window).resize() has no effect. Also tried moving $(window).resize() into $(window).load.

Anyways its a Great plugin - looking forward to communities tips, also thanks in advance for any responses/ support on the forum.

[bigspotteddog]

Would it be possible for me to see the page so I can debug it to see what is going on? I have a pretty busy day ahead of me, but I might be able to have a look at it tomorrow.

I love amaranth! :) We eat it every morning for breakfast.

[amarnath01]

Hi, In addition to the above issue, I am trying to resolve two more issue while implementing the ScrolltoFixed plugin.

Issue 1: Same as the comment above, I am not sure if this becomes obvious with a jsfiddle, do let me know.

Issue 2: In my div: table based layout there seems to be a vertical scroll always in my layout. It looks like a 40px height is getting added to the body which is causing this, do let me know how to get rid of this.

Issue3: The left navigation links div on which I have implemented scrolltoFixed seems to jump in most browsers.

I am attaching a jsfiddle for your understanding --> http://jsfiddle.net/amarnath01/9LTpH/

As always thanks for the awesome plugin, looking forward to your suggestion/ solution.

[bigspotteddog]

Unfortunately, the fiddle appears to be working as I would expect in Chrome.

For issue 2: there is a spacer div added to replace the fixed element. You can hide this by giving it a "spacerClass" and setting the css for this class to display: none. That will get rid of the vertical scroll.

For issue 3: jumpiness typically involves a positioning issue relative to the page rather than its container. Try making the container position: relative. That will make the fixed element stay in place when it goes absolute.

I will have a look in other browsers when I get a chance.

[amarnath01]

Thanks for the lightning quick reply.. will implement your suggestions and get back. Thanks

[amarnath01]

Here's my update with the modified fiddle... http://jsfiddle.net/amarnath01/9LTpH/

Issue 2: I have defined a spacerClass : 'css-magic' and set it to display:none !important; This does hide the spacer div and gets rid of the vertical scroll, however when the content is minimal ie when there is no vertical scroll bar there is a white space/gap at the top right end (pls see the fiddle).

Issue 3: Jumpiness seems to persist even after defining position:relative for the left navigation container. However this vanishes when I define a marginTop of above 40px. Not sure whats happening here.

Hope to hear your suggestions on the above issues, thanks again for all the help.

Thanks, Amarnath

[amarnath01]

Hi, Hope I was able to demonstrate the issues with the fiddle. Do let me know if I am missing something while trying to make it work.

Thanks, Amarnath