Scrolling with fixed div layout and min-widths

Question

I\'ve been trying to layout this page, but for the life of me, can\'t seem to get it to wor

Answer 1

I think this may work for you...

Working Example

JS:

$(window).scroll(function () { // on scroll
    var win = $(window);
    var title = $('.title');
    var winWidth = $(window).innerWidth();
    var titleWidth = title.width();
    if (win.scrollLeft() >= titleWidth - winWidth) { // if scrolled to the right further than .title is wide minus the window's width
        title.addClass('fixed'); // add the fixed class
        title.offset({ //keep the title bar at the top 
            top: win.scrollTop(),
        });
    } else { // if not
        title.removeClass('fixed'); // removed class fixed
        title.offset({ // keep the title bar at the top anyway
            top: win.scrollTop(),
        });
    }
});

CSS:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html, body {
    width: 1024px;
    height:100%
}
.title {
    background:red;
    position: absolute;
    z-index:2;
    min-width: 100%;
}
#content {
    background: blue;
    padding-top:50px;
    min-width:1024px;
    min-height:100%;
}
.fixed {
    position: fixed;
    right: 0;
}

API documentation:

.scroll()
.innerWidth()
.width()
.scrollLeft()
.offset()
.addClass()
.removeClass()

Answer 2

You have to use a combination of CSS and JavaScript. As the others stated, a fixed element does not scroll and you cannot choose that it should scroll horizontally but not vertically. So there comes the JS.

This is the shortest form I could think of. This should work on mobile devices, too. It works with a inner div in the fixed element, which is positioned absolute and reacts to the windows scroll event.

Here is the codepen example: http://codepen.io/HerrSerker/pen/AJHyf

This just works with a fixed height header. If your header is not fixed in height, you have to add some JavaScript, that measures the height of the header and adds

HTML

<div id="maker"></div>
<header><div id="header_inner">Lorem ipsum dolor sit amet.</div></header>
<main><div id="#main_inner">Lorem ipsum dolor sit amet ...</div></main>

CSS

html,body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  overflow: auto;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#maker {
  width: 1024px;
  height: 1px;
  margin-top: -1px;
  background: red;
}
header {
  position: fixed;
  min-width: 1024px;
  background: black;
  color:white;
  width: 100%;
  height: 50px;
}
#header_inner {
  padding: 10px;
}
main {
  padding: 0px;
  padding-top: 50px;
  min-height: 100%;
  min-width: 1024px;
  background: gold;
  color: brown;
}
#main_inner {
  padding: 20px;
}

JavaScript

(function() {
  var headerInner = document.getElementById('header_inner');
  headerInner.style.position = 'absolute';
  var scrollReact = function() {          
    headerInner.style.left = '-'+self.pageXOffset+'px';
  }
  if ('addEventListener' in self) {
    self.addEventListener('scroll', scrollReact);
  } else if (typeof self.attachEvent == 'function') {
      self.attachEvent('scroll', scrollReact );
  }
}())

Answer 3

Pure CSS Solution. Here's my updated answer. Please check.

Demo link below:

Fiddle

HTML

<div id="title-bar">Title Bar</div>
<div id="content">Contents</div>

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
}
#title-bar, #content {
    min-width:1024px;
    width:100%;
}
 #title-bar {
    position:fixed;
    top:0;
    background:#CC0000;
    height:50px;
    color:#fff;
}
#content {
    top:50px;
    position:relative;
    background:#9EC2E3;
    height:calc(100% - 50px);
    overflow:auto;
}

Just let me know if you have concerns.

Answer 4

I think this should answer your query.

CLICK ME

Basically the fellow is trying moving the fixed nav with scroll events(playing with left property as he says)

Answer 5

I used position absolute to set height in percentage. like for titlebar ,

position:fixed;
    height:6%;

you can remove wrapper if you don't want to use,

Click for demo

Let me know more if it need some changes

Answer 6

I have to edit my answer, because after reading Lokesh Suthar's answer I finally understood your question! ;-)

There is no CSS solution! You'll find the reason in the spec (http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning):

Fixed positioning is a subcategory of absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport. For continuous media, fixed boxes do not move when the document is scrolled.

So you have to go with a JS solution like the one Lokesh Suthar has linked to in his answer.

A personal note:
Normally web designer try to avoid horizontal scrollbars at all costs!
They are "bad" for usability and most users hate to scroll horizontally. And instead of making a fixed positioned element wider than the viewport you should expand its height.
Remember: Using a JS solution on this will make content unreachable/ not visible if JS is disabled!