Scroll fixed positioned 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; }

-------------Problems Reply------------

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/

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.

Category:html Views:3 Time:2019-01-10
Tags: html css

Related post

  • Element fixed position horizontally, static vertically 2011-12-29

    Possible Duplicate: CSS: fixed position on x-axis but not y? I have a HTML page which is supposed to scroll horizontally which has a fixed position header tag. In the case that a vertical scrollbar appears (resize window) I want the header to scroll

  • Emulating fixed positioning in scrollable div in IE6 2012-01-16

    Ok this one is really messed up. Just try to run the following in JSfiddle. If you try it in any other browser it works correctly. If you run it in IE6, it will not work. How do I make this work with IE6? Also, content NEED to have position:relative.

  • How do I get a fixed position div to scroll horizontally with the content? Using jQuery 2011-01-13

    I have a div.scroll_fixed with the following CSS .scroll_fixed { position:absolute top:210px } .scroll_fixed.fixed { position:fixed; top:0; } I'm using the following jQuery code to set the .fixed class when the div reaches the top of the page. var to

  • Fixed position for elements inside scroll views in both directions 2012-02-05

    I am building a view in my Android application which should scroll both horizontal and vertical. Therefore I have surrounded my view with a horizontal scroll view and inside this horizontal scroll view I have another scroll view (vertical scroll view

  • Is it possible to have a web browser scroll to show CSS fixed position items that are outside the viewport of the web browser? 2009-02-25

    I am trying to create a CSS layout where the page looks like it's in the middle of the forest. There is a left and right div with the background trees, some header divs that show the top of the page with various wildlife, and some footer divs that sh

  • Fixed Positioning With Scrolling 2009-03-30

    If, for example, I have a menu using fixed positioning but it's larger than the height of the current window, is there a way to allow this to scroll? The browser's default behaviour is to just hide it, and not let you access it. div#sidebar { positio

  • fixed position element causes distortion when scrolling 2009-09-08

    On this page there's a black logo box on the right of the page whose position is fixed. The divs that hold the photo and the main content area have their position set to relative. In Firefox 3.5, if you scroll up and down the page, you'll notice a re

  • Problem in IE6 with fixed position and multi-select boxes when scrolling 2010-03-01

    I am using the common css-workaround to achieve a fixed position of an element in IE6 <style type="text/css" > .fixedPos { position:fixed; } </style> <!-- IE specific code: --> <!--[if lte IE 7]> <style type="text/css">

  • Fixed position table header relative to parent scrolling DIV element 2010-10-13

    I need a fixed position thead that is static when the parent DIV element is scrolled. I don't need a scrolling tbody element as the parent will take care of this. Not fussed about IE6 support. The HTML: <div class="scroll"> <form method="pos

  • Given a fixed position Element, How to show a scrollbar when the item scrolls off the page 2011-02-25

    please take a look at this fiddle: http://jsfiddle.net/T6Hhy/1/ What I have here is a rightcol that is position:fixed. The issue I'm having is that items are scrolling off the page, but the scroll bar is not appear. How can I have a fixed position co

  • Flex Spark Datagrid fixed column, horizontal scrolling 2011-07-11

    How can I make my datagrid have its first column fixed and scroll the reset horizontally and vertically? --------------Solutions------------- The spark Datagrid currently does not support locked rows and columns. Your only options if you need locked

  • Make fixed position div stay where it is when scroll position is at bottom 2011-08-12

    I have a fixed position div that sits at bottom:0. When I scroll down to $('html').height()-200, I want my fixed position div to be position: absolute; top: $('html').height)-200. Any ideas on how to make this work? I got pretty close but the code is

  • scrolling text underneath a fixed position element 2011-11-08

    I am currently creating a one page website, however I am having an issue, I need the scroll text underneath the fixed element however you can see the text that should be dissapearing under the fixed position element, as the element as a back-ground,

  • Fixed Position Breaks JQuery Hover Scroller 2012-03-19

    I've been having trouble with malihu's excellent thumbnail scroller plugin (http://manos.malihu.gr/jquery-thumbnail-scroller). In my design, the scroller has to be wrapped in an element which has position:fixed. Unfortunately, when you do this, a dea

  • Android Scroller fling to fixed position 2012-04-12

    I'm trying to use a Scroller to fling to a fixed position. My problem is: it ends up in the correct position, but it's either just running once and setting the end position immediately or scrolls very slowly first and then jumps to the end. EDIT: the

  • jquery - make sticky fixed position div stop scrolling at footer 2014-06-25

    I have the following jquery script to make a fixed position for a div after a certain amount of scrolling. That works great but I need this div to stop scrolling when it hits the footer div, otherwise it overlaps it. Any help would be appreciated. ht

  • Anyone know of a jQuery fisheye/dock navigation plugin that is able to have a fixed position? 2009-08-08

    I'm looking to put a horizontal fisheye/dock nav on my site, but I need it to be fixed positioning... all the ones I've found do not support fixed positioning. Here are links to some of the ones I've found: jQuery OS X Dock #1 - Doesn't support fixed

  • CSS: fixed position on x-axis but not y? 2010-01-12

    Is there a way to fix a position on the x-axis only? So when a user scrolls up, the div tag will scroll up with it, but not side to side? --------------Solutions------------- Its a simple technique using the script also. You can check a demo here too

  • Fixed-position columns layout with a minimum width 2011-03-26

    I'm trying to build a layout for a blog-like application having: a fixed-position fixed-width header fixed-position fixed-width left and right columns a scrollable centered fixed-width content So basically there's a scrollable column in the middle of

  • Fixed Position div Vertical Only 2011-05-20

    I have a current web build with a right sidebar that is a fixed position. I have tried to positioning from the right but don't want it overlapping other divs content. What I am looking for is to have the content scrollable horizontally to the right w

  • JQuery smooth scroll to positions inside DIV with overflow hidden 2011-06-22

    I have a div full of content (dates). At anyone time you can see 5 dates on screen. I want the arrow on the right of the div to scroll the div showing the next 5 until the end and visa versa the arrow on the left scrolling left by 5 dates until it re

  • Fixed Position but Relative to Container 2011-07-22

    I am trying to fix a div so it always sticks to the top of the screen, using: position: fixed; top: 0px; right: 0px; However, the div is inside a centered container. When I use position:fixed it fixes the div relative to the browser window, such as i

  • how do I make only a portion of a fixed positioned div visible? 2011-08-29

    I created a fixed positioned div that has a very large width so that it can contain about 2 dozen company logos horizontally in a single line. As far as html goes, I just created a ul with one logo per li and then floated all of the li to the left. I

  • Tabs at fixed positions in JTabbedPane or in one row 2012-03-09

    In our application that has a JTabbedPane with unlimited tabs, when the width of the tabs exceeds the tabbed pane's width, the tabs start wrapping into several rows. When you then click on a tab in one of the upper rows, the complete row comes down a

  • Something strange with Firefox and fixed position via JS 2013-05-05

    I'm working on a website and I'm using jQuery and the CSS framework Zurb Foundation. This framework changes actually every CSS default property of every object on the page, so it's quite hard to get if this is a CSS problem. I have this code: functio

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.068 (s). 12 q(s)