I've been searching for a solution to my problem and have managed to figure out the first part, but there's still one issue that I could use some help with. While I have some knowledge of html, css, and basic php, I'm completely new to javascript / jquery and consider myself an amateur in web design. So, please explain things in simple terms!
My goal is to create a website with a fixed width of 960px that is centered in wider browser windows. To achieve this, I'm using the following CSS:
#container {
width:960px;
margin:auto;
}
This CSS code is working fine.
At the top of this div, I want to have a horizontal menu that stays fixed in place and floats above the rest of the content on the page. The menu should be 960px wide and remain at the top of the viewport even when the user scrolls down vertically.
When the window is wider than 960px, the following CSS works well:
#top {
width:960px;
position:fixed;
top:0;
}
The problem arises when the window is resized to less than 960px wide. In such cases, the fixed menu remains stuck to the left side of the screen while the main content area scrolls to the right, making some parts of the menu inaccessible.
After looking for a solution, I came across this thread, which suggested using the following jquery code:
$(window).scroll(function () {
$('#top').css('left', -($(window).scrollLeft()));
});
This jquery code adjusts the left positioning of the #top div as the user scrolls horizontally. It seemed like a perfect solution for my needs. After some trial and error, I added the script inside my body tags:
<script src="jquery.js"></script>
<script type="text/javascript"> $(window).scroll(function () {
$('#top').css('left', -($(window).scrollLeft()));
});
</script>
Everything worked well until I encountered another issue. When the window is resized back to being wider than 960px, the floating menu remains stuck to the left side rather than moving back to the center along with the main content. This disrupts the layout and misaligns the menu with the rest of the content.
I need a way to remove or reset this CSS adjustment as soon as the browser window exceeds 960px in width and the horizontal scrollbar disappears.
Is there a javascript / jquery solution for this problem? As a beginner in this field, I haven't had much luck finding a solution on my own...
Any suggestions or assistance would be greatly appreciated!