CODEWITHSUNDEEP
htmlcssmenufixed
Moussa Harajli
Moussa Harajli

Reputation: 1516

Scroll Across A Fixed Div If Window Is Too Small

I have a menu bar coded with css and html only, the bar is fixed at the top but when the screen is resized and you try to scroll through the page on the x-axis, the bar stays in the top left corner, you can scroll through the small window but you can't scroll through the page.

Here is my code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="StyleSheets/StyleSheet.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>TeraShare</title>
        <script type="text/javascript" src="JQuery/JQuery.js"></script>
        <script type="text/javascript" src="Scripts/JavaScript.js"></script>
    </head>

    <body>
        <div id="Wrapper">
            <div id="Menu">
                <div id="Logo"><a href=""><img src="Pictures/Logo.png" /></a></div>
                <div id="Buttons">
                    <a href="LogIn/"><div class="Button" title="LogIn">LogIn</div></a>
                    <a href="Register/"><div class="Button" title="Register">Register</div></a>
                    <div class="Button" title="Menu">Menu&nbsp;<span class="Triangle"></span></div>
                </div>
            </div>
            <div id="Content">
                <div id="Fix"></div>
            </div>
        </div>
    </body>
</html>

CSS:

    #Menu
{
    position:fixed;
    top:0px;
    width:100%;
    min-width:965px;
    height:49px;
    border-bottom:rgba(82,82,82,1);
    box-shadow:0 2px 3px rgba(182, 182, 182, 0.75);
    background-color:rgb(68, 68, 68);
    z-index:100;    
}

Upvotes: 2

Views: 1935

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

Change the left of the fixed div to whatever the scrollLeft value of the window is when it scrolls.

$(window).on('scroll', function () {
    $("#Menu").css('left', '-' + $(this).scrollLeft() + 'px');
});

http://jsfiddle.net/ebeBw/1/

Upvotes: 2

Related Questions