Whenever the scroll bar on my website at travismorenz.com reaches the sticky menu, it slightly shifts the menu over a few pixels. This issue can be observed by scrolling down slowly and watching the menu.
The sticky menu functionality is achieved using the JQuery plugin stickUp. To prevent the menu from jumping to the left while sticking to the top, I nested the "buttons" class inside another class called "menu" and set the width of the "menu" to 100%. However, this setup resulted in the small jump that is currently visible.
<body>
<div id="page1">
<div id="p1content">
<h id="Name">Travis Morenz</h>
<p>Testing & Testing</p>
</div>
<div class='menu'>
<div id='buttons'>
<div><a href="#page1" class="btn">Home</a></div>
<div><a href="#page2" class="btn">Projects</a></div>
<div><a href="#" class="btn">About</a></div>
</div>
</div>
</div>
<div id="page2">
<div class='behindmenu'></div>
</div>
I attempted to create a demonstration on JSFiddle for easier viewing, but unfortunately, the sticky menu functionality does not work within it.
The code remains unchanged, so any assistance with resolving this issue would be highly appreciated.