Scrolling Fixed Div horizontal

HDFilmMaker2112 · May 16, 2012

I have a fixed div tag on the page. What I need to happen is when a user resizes their window down below 1000px, to permit the fixed div to scroll horizontally. As of right now, it just gets chopped off. I found a jquery plug-in and am trying to use it, but I don't understand how to (or if it's even what I need to be using).

http://www.area51entertainment.co/emoto

Here's what I have right now:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" /> 
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<?
if(isset($_GET['investors'])){
echo '<meta name="robots" content="noindex, nofollow" />';
}
else{
echo '<meta name="robots" content="index, follow" />';
}
?>
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000; 
font-family: Verdana; 
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" /> 
<link rel="image_src" href="./logo.png" /> 
<script language="javascript" src="emoto/jquery-1.7.2.js"></script>
<script language="javascript" src="emoto/jquery.scrollstay.js"></script>

</head>
<body>
<div class="wrapper">
<div class="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out 
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>

jquery

/**
* jquery.scrollstay.js
* scrollFollow for minimalists.
*
* Derived from jquery.scrollFollow.js by R.A. Ray,
* Copyright (c) 2008 Net Perspective (http://kitchen.net-perspective.com/)
* Licensed under the MIT License (http://www.opensource.org/licenses/mit-license.php)
* 
* Removed all animation, delay, cookies and killSwitch.
* 
* @author Dylan McCall
*
* @projectDescription	jQuery plugin that quietly keeps an element visible as the user scrolls
* 
* @version 0.4.0
* 
* @requires jquery.js (tested with 1.2.6)
* 
* @param offset			int - Number of pixels box should remain from top of viewport
* 								default: 0
* @param container	string - ID of the containing div
* 								default: box's immediate parent
* @param relativeTo	string - Scroll animation can be relative to either the 'top' or 'bottom' of the viewport
* 								default: 'top'
*/

( function( $ ) {

$.scrollStay = function ( box, options ) {
	// Convert box into a jQuery object
	box = $( box );

	// 'box' is the object to be animated
	var position = box.css( 'header_float' );

	function update() {
		// A bunch of values we need to determine where to animate to
		var viewportHeight = parseInt( $( window ).height() );
		var pageScroll =  parseInt( $( document ).scrollTop() );
		var parentTop =  parseInt( box.cont.offset().top );
		var parentHeight = parseInt( box.cont.attr( 'offsetHeight' ) );
		var boxHeight = parseInt( box.attr( 'offsetHeight' ) + ( parseInt( box.css( 'marginTop' ) ) || 0 ) + ( parseInt( box.css( 'marginBottom' ) ) || 0 ) );
		var aniTop;

		/* Make sure the user wants the animation to happen, and it
		   will be helpful. (It isn't helpful if the user is trying
		   to scroll within the box!) */
		if ( viewportHeight > boxHeight ) {
			// If the box should animate relative to the top of the window
			if ( options.relativeTo == 'top' ) {
				// Don't animate until the top of the window is close enough to the top of the box
				if ( box.initialOffsetTop >= ( pageScroll + options.offset ) ) {
					aniTop = box.initialTop;
				} else {
					aniTop = Math.min( ( Math.max( ( -parentTop ), ( pageScroll - box.initialOffsetTop + box.initialTop ) ) + options.offset ), ( parentHeight - boxHeight - box.paddingAdjustment ) );
				}
			}
			// If the box should animate relative to the bottom of the window
			else if ( options.relativeTo == 'bottom' ) {
				// Don't animate until the bottom of the window is close enough to the bottom of the box
				if ( ( box.initialOffsetTop + boxHeight ) >= ( pageScroll + options.offset + viewportHeight ) ) {
					aniTop = box.initialTop;
				} else {
					aniTop = Math.min( ( pageScroll + viewportHeight - boxHeight - options.offset ), ( parentHeight - boxHeight ) );
				}
			}

			box.css({ top: aniTop });
		}
	};

	// If no parent ID was specified, and the immediate parent does not have an ID
	// options.container will be undefined. So we need to figure out the parent element.
	if ( options.container == '') {
		box.cont = box.parent();
	} else {
		box.cont = $( '#' + options.container );
	}

	// Finds the default positioning of the box.
	box.initialOffsetTop =  parseInt( box.offset().top );
	box.initialTop = parseInt( box.css( 'top' ) ) || 0;

	// Hack to fix different treatment of boxes positioned 'absolute' and 'relative'
	if ( box.css( 'position' ) == 'relative' ) {
		box.paddingAdjustment = parseInt( box.cont.css( 'paddingTop' ) ) + parseInt( box.cont.css( 'paddingBottom' ) );
	} else {
		box.paddingAdjustment = 0;
	}

	// Animate the box when the page is scrolled
	$( window ).bind('scroll resize', function () {
		update();
	} );

	// Run an initial animation on page load
	update();
};

$.fn.scrollStay = function ( options ) {
	options = options || {};
	options.relativeTo = options.relativeTo || 'top';
	options.offset = options.offset || 0;
	options.container = options.container || this.parent().attr( 'id' );

	this.each( function() {
		new $.scrollStay( this, options );
	} );

	return this;
};
})( jQuery );

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}

.wrapper{
min-height: 2000px;
min-width: 1000px;
}

.header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}

.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}

.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}

.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}

.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}

.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}

img{
border: 0px;
}

smoseley · May 16, 2012

Why would you need JS? Wouldn't this simple CSS work?

position: fixed;
width: 100%;
min-width: 1000px;
overflow: auto;

HDFilmMaker2112 · May 17, 2012

Why would you need JS? Wouldn't this simple CSS work?
position: fixed;
width: 100%;
min-width: 1000px;
overflow: auto;

Nope. It seems with fixed elements they're permanently fixed at the pixel x & y points set by the width and height and position settings; regardless of the resizing of the window or using overflow.

smoseley · May 17, 2012

This works:

<html>
<head>
<title>Fixer</title>
<style type="text/css">
body {
margin: 0;
}
#fixer {
position: fixed;
width: 100%;
top: 20px;
overflow: auto;
background-color: #eee;
}
#inner {
height: 100px;
width: 100%;
min-width: 1000px;
}
#content {
padding: 140px 20px 20px;
}
</style>
</head>
<body>
<div id="fixer">
<div id="inner">
<p>Some BS content</p>
</div>
</div>

<div id="content">
<h1>Some BS Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper, ipsum quis viverra scelerisque, lorem erat mattis odio, quis lobortis arcu magna eu ligula. Nam pharetra egestas tellus vitae tempor. Cras condimentum tincidunt mi ac tincidunt. Vestibulum ultricies libero massa. Mauris ornare, metus gravida volutpat laoreet, neque libero vulputate metus, vel dapibus turpis leo ut velit. Curabitur porttitor leo non nisl tempus pulvinar. Morbi id leo id sem accumsan porta. Proin pulvinar viverra nibh, ornare ornare tellus commodo sit amet. Phasellus interdum, lacus eu vehicula mollis, eros nisl tristique sapien, ac gravida justo nisl vel dui. Aliquam enim lorem, interdum nec pharetra quis, sagittis vitae dolor.</p>
<p>Donec placerat sollicitudin augue, et condimentum sem convallis vel. Vestibulum varius eros quis nisl rutrum at convallis risus malesuada. Vivamus egestas arcu et massa tempus nec aliquam nisl faucibus. Quisque tincidunt adipiscing dolor, eget gravida ipsum laoreet eget. Suspendisse metus arcu, pharetra nec feugiat eget, aliquam aliquet erat. Ut at hendrerit mauris. Mauris est mi, elementum id interdum in, auctor in metus. Maecenas facilisis volutpat gravida. Nulla id sem ut augue consectetur cursus sagittis et leo. Duis at risus erat. Vivamus et nunc at sem vestibulum condimentum. Ut diam nulla, suscipit quis pharetra eget, elementum semper nisi. Phasellus magna eros, convallis eget tristique eget, congue elementum elit.</p>
<p>Vivamus vulputate dictum congue. Aliquam at ante sapien. Mauris et venenatis nisl. Curabitur sed lectus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce viverra tincidunt eleifend. Sed id massa nunc. Suspendisse eget enim at arcu tempus fermentum. Praesent tincidunt pellentesque est, eget faucibus magna suscipit at. Pellentesque convallis diam at dui pellentesque scelerisque. Proin fringilla mattis sagittis. Curabitur tincidunt nisi est, vel sollicitudin neque. Aliquam elementum auctor nunc ac sollicitudin. Mauris ac accumsan justo. Vestibulum non libero erat. Donec leo metus, bibendum in gravida a, ultricies sed orci.</p>
<p>Maecenas convallis nulla justo. Ut nec massa nec sem venenatis imperdiet a quis eros. Nulla vitae tincidunt elit. Aliquam erat volutpat. Morbi vel tellus mi, a feugiat dui. Ut et arcu odio, sed vulputate nunc. Nulla facilisi. Phasellus magna libero, bibendum et dapibus eu, commodo et tortor. Aliquam erat volutpat. Etiam eget felis dolor. Fusce eleifend enim dui, et malesuada nisl. Mauris at ante ipsum. Sed eleifend adipiscing felis, id auctor magna pulvinar at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat.</p>
<p>Vestibulum eros risus, rutrum id condimentum in, vestibulum sed odio. Duis accumsan, urna ut dictum gravida, nibh augue consequat eros, a hendrerit erat lectus eget velit. Cras vitae interdum odio. Donec dictum erat id massa fermentum sed iaculis turpis fringilla. Nulla facilisi. Aliquam fermentum laoreet justo tincidunt vulputate. Fusce urna erat, vehicula nec convallis id, auctor vitae dui. In tincidunt elementum laoreet. Nam eu libero id ante rutrum commodo. Pellentesque nisl magna, condimentum sit amet fermentum sed, tincidunt nec leo. Fusce vitae vestibulum est. Ut lacinia mattis augue eu gravida.</p>
<h1>Some BS Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper, ipsum quis viverra scelerisque, lorem erat mattis odio, quis lobortis arcu magna eu ligula. Nam pharetra egestas tellus vitae tempor. Cras condimentum tincidunt mi ac tincidunt. Vestibulum ultricies libero massa. Mauris ornare, metus gravida volutpat laoreet, neque libero vulputate metus, vel dapibus turpis leo ut velit. Curabitur porttitor leo non nisl tempus pulvinar. Morbi id leo id sem accumsan porta. Proin pulvinar viverra nibh, ornare ornare tellus commodo sit amet. Phasellus interdum, lacus eu vehicula mollis, eros nisl tristique sapien, ac gravida justo nisl vel dui. Aliquam enim lorem, interdum nec pharetra quis, sagittis vitae dolor.</p>
<p>Donec placerat sollicitudin augue, et condimentum sem convallis vel. Vestibulum varius eros quis nisl rutrum at convallis risus malesuada. Vivamus egestas arcu et massa tempus nec aliquam nisl faucibus. Quisque tincidunt adipiscing dolor, eget gravida ipsum laoreet eget. Suspendisse metus arcu, pharetra nec feugiat eget, aliquam aliquet erat. Ut at hendrerit mauris. Mauris est mi, elementum id interdum in, auctor in metus. Maecenas facilisis volutpat gravida. Nulla id sem ut augue consectetur cursus sagittis et leo. Duis at risus erat. Vivamus et nunc at sem vestibulum condimentum. Ut diam nulla, suscipit quis pharetra eget, elementum semper nisi. Phasellus magna eros, convallis eget tristique eget, congue elementum elit.</p>
<p>Vivamus vulputate dictum congue. Aliquam at ante sapien. Mauris et venenatis nisl. Curabitur sed lectus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce viverra tincidunt eleifend. Sed id massa nunc. Suspendisse eget enim at arcu tempus fermentum. Praesent tincidunt pellentesque est, eget faucibus magna suscipit at. Pellentesque convallis diam at dui pellentesque scelerisque. Proin fringilla mattis sagittis. Curabitur tincidunt nisi est, vel sollicitudin neque. Aliquam elementum auctor nunc ac sollicitudin. Mauris ac accumsan justo. Vestibulum non libero erat. Donec leo metus, bibendum in gravida a, ultricies sed orci.</p>
<p>Maecenas convallis nulla justo. Ut nec massa nec sem venenatis imperdiet a quis eros. Nulla vitae tincidunt elit. Aliquam erat volutpat. Morbi vel tellus mi, a feugiat dui. Ut et arcu odio, sed vulputate nunc. Nulla facilisi. Phasellus magna libero, bibendum et dapibus eu, commodo et tortor. Aliquam erat volutpat. Etiam eget felis dolor. Fusce eleifend enim dui, et malesuada nisl. Mauris at ante ipsum. Sed eleifend adipiscing felis, id auctor magna pulvinar at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat.</p>
<p>Vestibulum eros risus, rutrum id condimentum in, vestibulum sed odio. Duis accumsan, urna ut dictum gravida, nibh augue consequat eros, a hendrerit erat lectus eget velit. Cras vitae interdum odio. Donec dictum erat id massa fermentum sed iaculis turpis fringilla. Nulla facilisi. Aliquam fermentum laoreet justo tincidunt vulputate. Fusce urna erat, vehicula nec convallis id, auctor vitae dui. In tincidunt elementum laoreet. Nam eu libero id ante rutrum commodo. Pellentesque nisl magna, condimentum sit amet fermentum sed, tincidunt nec leo. Fusce vitae vestibulum est. Ut lacinia mattis augue eu gravida.</p>
<h1>Some BS Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper, ipsum quis viverra scelerisque, lorem erat mattis odio, quis lobortis arcu magna eu ligula. Nam pharetra egestas tellus vitae tempor. Cras condimentum tincidunt mi ac tincidunt. Vestibulum ultricies libero massa. Mauris ornare, metus gravida volutpat laoreet, neque libero vulputate metus, vel dapibus turpis leo ut velit. Curabitur porttitor leo non nisl tempus pulvinar. Morbi id leo id sem accumsan porta. Proin pulvinar viverra nibh, ornare ornare tellus commodo sit amet. Phasellus interdum, lacus eu vehicula mollis, eros nisl tristique sapien, ac gravida justo nisl vel dui. Aliquam enim lorem, interdum nec pharetra quis, sagittis vitae dolor.</p>
<p>Donec placerat sollicitudin augue, et condimentum sem convallis vel. Vestibulum varius eros quis nisl rutrum at convallis risus malesuada. Vivamus egestas arcu et massa tempus nec aliquam nisl faucibus. Quisque tincidunt adipiscing dolor, eget gravida ipsum laoreet eget. Suspendisse metus arcu, pharetra nec feugiat eget, aliquam aliquet erat. Ut at hendrerit mauris. Mauris est mi, elementum id interdum in, auctor in metus. Maecenas facilisis volutpat gravida. Nulla id sem ut augue consectetur cursus sagittis et leo. Duis at risus erat. Vivamus et nunc at sem vestibulum condimentum. Ut diam nulla, suscipit quis pharetra eget, elementum semper nisi. Phasellus magna eros, convallis eget tristique eget, congue elementum elit.</p>
<p>Vivamus vulputate dictum congue. Aliquam at ante sapien. Mauris et venenatis nisl. Curabitur sed lectus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce viverra tincidunt eleifend. Sed id massa nunc. Suspendisse eget enim at arcu tempus fermentum. Praesent tincidunt pellentesque est, eget faucibus magna suscipit at. Pellentesque convallis diam at dui pellentesque scelerisque. Proin fringilla mattis sagittis. Curabitur tincidunt nisi est, vel sollicitudin neque. Aliquam elementum auctor nunc ac sollicitudin. Mauris ac accumsan justo. Vestibulum non libero erat. Donec leo metus, bibendum in gravida a, ultricies sed orci.</p>
<p>Maecenas convallis nulla justo. Ut nec massa nec sem venenatis imperdiet a quis eros. Nulla vitae tincidunt elit. Aliquam erat volutpat. Morbi vel tellus mi, a feugiat dui. Ut et arcu odio, sed vulputate nunc. Nulla facilisi. Phasellus magna libero, bibendum et dapibus eu, commodo et tortor. Aliquam erat volutpat. Etiam eget felis dolor. Fusce eleifend enim dui, et malesuada nisl. Mauris at ante ipsum. Sed eleifend adipiscing felis, id auctor magna pulvinar at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat.</p>
<p>Vestibulum eros risus, rutrum id condimentum in, vestibulum sed odio. Duis accumsan, urna ut dictum gravida, nibh augue consequat eros, a hendrerit erat lectus eget velit. Cras vitae interdum odio. Donec dictum erat id massa fermentum sed iaculis turpis fringilla. Nulla facilisi. Aliquam fermentum laoreet justo tincidunt vulputate. Fusce urna erat, vehicula nec convallis id, auctor vitae dui. In tincidunt elementum laoreet. Nam eu libero id ante rutrum commodo. Pellentesque nisl magna, condimentum sit amet fermentum sed, tincidunt nec leo. Fusce vitae vestibulum est. Ut lacinia mattis augue eu gravida.</p>
</div>
</body>
</html>

HDFilmMaker2112 · May 17, 2012

I guess I haven't explained myself well enough.

I'm basically looking to replicate the top bar on facebook.

If you go to facebook.com and decrease the window size, you scroll the window bar at the bottom of the page and it will scroll the fixed bar at the top.

http://www.area51entertainment.co/emoto/1.png

then if you scroll to the right you get this:

http://www.area51entertainment.co/emoto/2.png

Right now facebook would look like this if it was using my code:

http://www.area51entertainment.co/emoto/3.png

(The page wouldn't scroll the fixed div tag at the top, even if the rest of the page was scrolled to the right.)

smoseley · May 17, 2012

I see what you're saying now. Facebook actually switches their header from position:fixed to position:absolute when your browser is too narrow.

smoseley · May 17, 2012

FYI, in case you were interested... here was my latest (failed) attempt:

<html>
<head>
<title>Fixer</title>
<style type="text/css">
body {
margin: 0;
}
#head {
position: fixed;
top: 0px;
width: 100%;
background-color: #009;
text-align: center;
}
#head .content {
display: inline-block;
width: 960px;
margin: 0 auto;
padding: 10px 20px;
}
#head .content p {
float: left;
margin: 0;
color: #fff;
font-weight: bold;
size: 15px;
}
#head .content input {
float: right;
border: 0;
height: 20px;
}

#content {
padding: 20px;
width: 960px;
margin: 20px auto 20px;
}
</style>
</head>
<body>
<div id="head">
<div id="head-content">
<div class="content">
<p>HeadScroll</p>
<input type="text" />
</div>
</div>
</div>

<div id="content">
<h1>Some BS Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper, ipsum quis viverra scelerisque, lorem erat mattis odio, quis lobortis arcu magna eu ligula. Nam pharetra egestas tellus vitae tempor. Cras condimentum tincidunt mi ac tincidunt. Vestibulum ultricies libero massa. Mauris ornare, metus gravida volutpat laoreet, neque libero vulputate metus, vel dapibus turpis leo ut velit. Curabitur porttitor leo non nisl tempus pulvinar. Morbi id leo id sem accumsan porta. Proin pulvinar viverra nibh, ornare ornare tellus commodo sit amet. Phasellus interdum, lacus eu vehicula mollis, eros nisl tristique sapien, ac gravida justo nisl vel dui. Aliquam enim lorem, interdum nec pharetra quis, sagittis vitae dolor.</p>
<p>Donec placerat sollicitudin augue, et condimentum sem convallis vel. Vestibulum varius eros quis nisl rutrum at convallis risus malesuada. Vivamus egestas arcu et massa tempus nec aliquam nisl faucibus. Quisque tincidunt adipiscing dolor, eget gravida ipsum laoreet eget. Suspendisse metus arcu, pharetra nec feugiat eget, aliquam aliquet erat. Ut at hendrerit mauris. Mauris est mi, elementum id interdum in, auctor in metus. Maecenas facilisis volutpat gravida. Nulla id sem ut augue consectetur cursus sagittis et leo. Duis at risus erat. Vivamus et nunc at sem vestibulum condimentum. Ut diam nulla, suscipit quis pharetra eget, elementum semper nisi. Phasellus magna eros, convallis eget tristique eget, congue elementum elit.</p>
<p>Vivamus vulputate dictum congue. Aliquam at ante sapien. Mauris et venenatis nisl. Curabitur sed lectus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce viverra tincidunt eleifend. Sed id massa nunc. Suspendisse eget enim at arcu tempus fermentum. Praesent tincidunt pellentesque est, eget faucibus magna suscipit at. Pellentesque convallis diam at dui pellentesque scelerisque. Proin fringilla mattis sagittis. Curabitur tincidunt nisi est, vel sollicitudin neque. Aliquam elementum auctor nunc ac sollicitudin. Mauris ac accumsan justo. Vestibulum non libero erat. Donec leo metus, bibendum in gravida a, ultricies sed orci.</p>
<p>Maecenas convallis nulla justo. Ut nec massa nec sem venenatis imperdiet a quis eros. Nulla vitae tincidunt elit. Aliquam erat volutpat. Morbi vel tellus mi, a feugiat dui. Ut et arcu odio, sed vulputate nunc. Nulla facilisi. Phasellus magna libero, bibendum et dapibus eu, commodo et tortor. Aliquam erat volutpat. Etiam eget felis dolor. Fusce eleifend enim dui, et malesuada nisl. Mauris at ante ipsum. Sed eleifend adipiscing felis, id auctor magna pulvinar at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat.</p>
<p>Vestibulum eros risus, rutrum id condimentum in, vestibulum sed odio. Duis accumsan, urna ut dictum gravida, nibh augue consequat eros, a hendrerit erat lectus eget velit. Cras vitae interdum odio. Donec dictum erat id massa fermentum sed iaculis turpis fringilla. Nulla facilisi. Aliquam fermentum laoreet justo tincidunt vulputate. Fusce urna erat, vehicula nec convallis id, auctor vitae dui. In tincidunt elementum laoreet. Nam eu libero id ante rutrum commodo. Pellentesque nisl magna, condimentum sit amet fermentum sed, tincidunt nec leo. Fusce vitae vestibulum est. Ut lacinia mattis augue eu gravida.</p>
<h1>Some BS Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper, ipsum quis viverra scelerisque, lorem erat mattis odio, quis lobortis arcu magna eu ligula. Nam pharetra egestas tellus vitae tempor. Cras condimentum tincidunt mi ac tincidunt. Vestibulum ultricies libero massa. Mauris ornare, metus gravida volutpat laoreet, neque libero vulputate metus, vel dapibus turpis leo ut velit. Curabitur porttitor leo non nisl tempus pulvinar. Morbi id leo id sem accumsan porta. Proin pulvinar viverra nibh, ornare ornare tellus commodo sit amet. Phasellus interdum, lacus eu vehicula mollis, eros nisl tristique sapien, ac gravida justo nisl vel dui. Aliquam enim lorem, interdum nec pharetra quis, sagittis vitae dolor.</p>
<p>Donec placerat sollicitudin augue, et condimentum sem convallis vel. Vestibulum varius eros quis nisl rutrum at convallis risus malesuada. Vivamus egestas arcu et massa tempus nec aliquam nisl faucibus. Quisque tincidunt adipiscing dolor, eget gravida ipsum laoreet eget. Suspendisse metus arcu, pharetra nec feugiat eget, aliquam aliquet erat. Ut at hendrerit mauris. Mauris est mi, elementum id interdum in, auctor in metus. Maecenas facilisis volutpat gravida. Nulla id sem ut augue consectetur cursus sagittis et leo. Duis at risus erat. Vivamus et nunc at sem vestibulum condimentum. Ut diam nulla, suscipit quis pharetra eget, elementum semper nisi. Phasellus magna eros, convallis eget tristique eget, congue elementum elit.</p>
<p>Vivamus vulputate dictum congue. Aliquam at ante sapien. Mauris et venenatis nisl. Curabitur sed lectus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce viverra tincidunt eleifend. Sed id massa nunc. Suspendisse eget enim at arcu tempus fermentum. Praesent tincidunt pellentesque est, eget faucibus magna suscipit at. Pellentesque convallis diam at dui pellentesque scelerisque. Proin fringilla mattis sagittis. Curabitur tincidunt nisi est, vel sollicitudin neque. Aliquam elementum auctor nunc ac sollicitudin. Mauris ac accumsan justo. Vestibulum non libero erat. Donec leo metus, bibendum in gravida a, ultricies sed orci.</p>
<p>Maecenas convallis nulla justo. Ut nec massa nec sem venenatis imperdiet a quis eros. Nulla vitae tincidunt elit. Aliquam erat volutpat. Morbi vel tellus mi, a feugiat dui. Ut et arcu odio, sed vulputate nunc. Nulla facilisi. Phasellus magna libero, bibendum et dapibus eu, commodo et tortor. Aliquam erat volutpat. Etiam eget felis dolor. Fusce eleifend enim dui, et malesuada nisl. Mauris at ante ipsum. Sed eleifend adipiscing felis, id auctor magna pulvinar at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat.</p>
<p>Vestibulum eros risus, rutrum id condimentum in, vestibulum sed odio. Duis accumsan, urna ut dictum gravida, nibh augue consequat eros, a hendrerit erat lectus eget velit. Cras vitae interdum odio. Donec dictum erat id massa fermentum sed iaculis turpis fringilla. Nulla facilisi. Aliquam fermentum laoreet justo tincidunt vulputate. Fusce urna erat, vehicula nec convallis id, auctor vitae dui. In tincidunt elementum laoreet. Nam eu libero id ante rutrum commodo. Pellentesque nisl magna, condimentum sit amet fermentum sed, tincidunt nec leo. Fusce vitae vestibulum est. Ut lacinia mattis augue eu gravida.</p>
<h1>Some BS Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper, ipsum quis viverra scelerisque, lorem erat mattis odio, quis lobortis arcu magna eu ligula. Nam pharetra egestas tellus vitae tempor. Cras condimentum tincidunt mi ac tincidunt. Vestibulum ultricies libero massa. Mauris ornare, metus gravida volutpat laoreet, neque libero vulputate metus, vel dapibus turpis leo ut velit. Curabitur porttitor leo non nisl tempus pulvinar. Morbi id leo id sem accumsan porta. Proin pulvinar viverra nibh, ornare ornare tellus commodo sit amet. Phasellus interdum, lacus eu vehicula mollis, eros nisl tristique sapien, ac gravida justo nisl vel dui. Aliquam enim lorem, interdum nec pharetra quis, sagittis vitae dolor.</p>
<p>Donec placerat sollicitudin augue, et condimentum sem convallis vel. Vestibulum varius eros quis nisl rutrum at convallis risus malesuada. Vivamus egestas arcu et massa tempus nec aliquam nisl faucibus. Quisque tincidunt adipiscing dolor, eget gravida ipsum laoreet eget. Suspendisse metus arcu, pharetra nec feugiat eget, aliquam aliquet erat. Ut at hendrerit mauris. Mauris est mi, elementum id interdum in, auctor in metus. Maecenas facilisis volutpat gravida. Nulla id sem ut augue consectetur cursus sagittis et leo. Duis at risus erat. Vivamus et nunc at sem vestibulum condimentum. Ut diam nulla, suscipit quis pharetra eget, elementum semper nisi. Phasellus magna eros, convallis eget tristique eget, congue elementum elit.</p>
<p>Vivamus vulputate dictum congue. Aliquam at ante sapien. Mauris et venenatis nisl. Curabitur sed lectus mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce viverra tincidunt eleifend. Sed id massa nunc. Suspendisse eget enim at arcu tempus fermentum. Praesent tincidunt pellentesque est, eget faucibus magna suscipit at. Pellentesque convallis diam at dui pellentesque scelerisque. Proin fringilla mattis sagittis. Curabitur tincidunt nisi est, vel sollicitudin neque. Aliquam elementum auctor nunc ac sollicitudin. Mauris ac accumsan justo. Vestibulum non libero erat. Donec leo metus, bibendum in gravida a, ultricies sed orci.</p>
<p>Maecenas convallis nulla justo. Ut nec massa nec sem venenatis imperdiet a quis eros. Nulla vitae tincidunt elit. Aliquam erat volutpat. Morbi vel tellus mi, a feugiat dui. Ut et arcu odio, sed vulputate nunc. Nulla facilisi. Phasellus magna libero, bibendum et dapibus eu, commodo et tortor. Aliquam erat volutpat. Etiam eget felis dolor. Fusce eleifend enim dui, et malesuada nisl. Mauris at ante ipsum. Sed eleifend adipiscing felis, id auctor magna pulvinar at. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam erat volutpat.</p>
<p>Vestibulum eros risus, rutrum id condimentum in, vestibulum sed odio. Duis accumsan, urna ut dictum gravida, nibh augue consequat eros, a hendrerit erat lectus eget velit. Cras vitae interdum odio. Donec dictum erat id massa fermentum sed iaculis turpis fringilla. Nulla facilisi. Aliquam fermentum laoreet justo tincidunt vulputate. Fusce urna erat, vehicula nec convallis id, auctor vitae dui. In tincidunt elementum laoreet. Nam eu libero id ante rutrum commodo. Pellentesque nisl magna, condimentum sit amet fermentum sed, tincidunt nec leo. Fusce vitae vestibulum est. Ut lacinia mattis augue eu gravida.</p>
</div>
</body>
</html>

HDFilmMaker2112 · May 17, 2012

I see what you're saying now. Facebook actually switches their header from position:fixed to position:absolute when your browser is too narrow.

So they do. Completely missed that. Thanks. I'd still like to be fixed with the ability to scroll, but I guess if facebook doesn't even do it (and they use a crap load of javascript), it must be a PITA to do at best.

smoseley · May 17, 2012

More likely, they tried it out, and found that the UX was less than satisfactory. JS scrolling will be laggy and disconnected feeling.

They probably opted for the switch to absolute positioning figuring it's a better solution for that edge case.

Sign In

Scrolling Fixed Div horizontal

Recommended Posts

HDFilmMaker2112

Link to comment

Share on other sites

smoseley

Link to comment

Share on other sites

HDFilmMaker2112

Link to comment

Share on other sites

smoseley

Link to comment

Share on other sites

HDFilmMaker2112

Link to comment

Share on other sites

smoseley

Link to comment

Share on other sites

smoseley

Link to comment

Share on other sites

HDFilmMaker2112

Link to comment

Share on other sites

smoseley

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information