CODEWITHSUNDEEP
htmlcss
Daniel Marschall
Daniel Marschall

Reputation: 3879

Scroll fixed positioned <div> horizontally

I am using a <div> which is fixed at the screen top. This div contains a menu. The rest of the page can be scrolled vertically and horizontally.

If the user has a small display, he cannot reach all items in the menu, although he can scroll horizontally. If I use overflow-x , the <div> would get its own scrollbar, which does not look good. I want that page and menu shares the main horizontal scrollbar.

Note: In my case, the width of the page is always aligned to the same size as the menu.

https://jsfiddle.net/8gL16o28/

HTML

<div id="menu">
    <img src="http://www.widescreen-wallpapers.de/wallpapers/502-sonnenuntergang-1.jpg" height="50" width="3000" />
</div>

<img src="http://i156.photobucket.com/albums/t40/solvaenda/mein1Blumenbild.jpg" height="3000" width="3000" />

CSS

#menu {
    position:fixed;
    top:0px;
    left:0px;
    height:50px
}
body {
    margin-top:50px;
}

Upvotes: 0

Views: 343

Answers (2)

user666
user666

Reputation: 226

Use position:absolute then.

#menu {
    position:absolute;
    top:0px;
    left:0px;
    height:50px
}

https://jsfiddle.net/8gL16o28/2/

JS correction:

$(document).ready(function(){
    $(window ).scroll(function(){
        $("#container").css("top",$("body").scrollTop()) 
    });
});

https://jsfiddle.net/8gL16o28/3/

Upvotes: 1

David P
David P

Reputation: 2083

I would add a onscroll event to the BODY tag. Have the menu div have an overflow of hidden. Then in the onscroll function check the scroll position of the page:

left = window.pageXOffset || document.documentElement.scrollLeft;

Then you can set the scrollLeft attribute of the div appropriately.

Upvotes: 0

Related Questions