Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

Fixing a header at top while body scrolls - Magnify issues

2:20 pm on Jun 3, 2013 (gmt 0)

Junior Member

5+ Year Member

joined:July 13, 2010
votes: 0


I'm trying to create a fixed div at the top like the ones on twitter and facebook.

This seems to be well documented with lots of examples and I've tried several and found one documented below. All works well but there's one issue.

If you magnify when the vertical scroll is at the top until the horizontal scroll bar appears at the bottom the top moves horizontally in line with the body when you use the horizontally scroll as it should.

But if you vertically scroll down from the top then magnify until the horizontal scroll bar appears and then use the horizontally scroll the top does not move.

In brief it stays in line when magnify when vertical scroll at top but if scroll down then magnify the top does not scroll horizontally with the body.


<style type="text/css">
body {
margin: 0px;
padding: 0px;
background-color: #669966;
#wrapper {
width: 1180px;
margin: 0 auto;
background-color: 669900;
text-align: center;
#site-message {
width: 1170px;
height: 50px;
background-color: #CCCCCC;
div.site-message-fixed {
position: fixed;
width: 1170px;
margin: 0px;
padding: 0px;
#site-body {
width: 1170px;
height: 2000px;
margin: 10px 0 0 0;
padding: 5px 0 0 0;
background-color: #FFCC66;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

// When the DOM is ready, initialize the scripts.
jQuery(function( $ ){

// Get a reference to the placeholder. This element will take up visual space when the message is moved into a fixed position.
var placeholder = $( "#site-message-placeholder" );

// Get a reference to the message whose position we want to "fix" on window-scroll.
var message = $( "#site-message" );

// Get a reference to the window object; we will use this several time, so cache the jQuery wrapper.
var view = $( window );

// Bind to the window scroll and resize events. Remember, resizing can also change the scroll of the page.
"scroll resize",

// Get the current offset of the placeholder. Since the message might be in fixed position, it is the plcaeholder that will give us reliable offsets.
var placeholderTop = placeholder.offset().top;

// Get the current scroll of the window.
var viewTop = view.scrollTop();

// Check to see if the view had scroll down past the top of the placeholder AND that the message is not yet fixed.
if (
(viewTop > placeholderTop) &&
!message.is( ".site-message-fixed" )

// The message needs to be fixed. Before we change its positon, we need to re-adjust the placeholder height to keep the same space as the message.
// NOTE: All we're doing here is going from auto height to explicit height.

// Make the message fixed.
message.addClass( "site-message-fixed" );

// Check to see if the view has scroll back up above the message AND that the message is currently fixed.
} else if (
(viewTop <= placeholderTop) &&
message.is( ".site-message-fixed" )

// Make the placeholder height auto again.
placeholder.css( "height", "auto" );

// Remove the fixed position class on the message. This will pop it back into its static position.
message.removeClass( "site-message-fixed" );




<div id="wrapper">
<div id="site-message-placeholder">
<div id="site-message">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost."</div>
<div id="site-body">
while($i<=80) {
echo "This line shows the line number for demonstration purposes only " . $i . "<br>";


Struggled a bit with the formatting to make it easier to read but its copy and paste with all needed tags inc jquery link. Also done it at 1180px so point can be illustrated on smaller screens.

I'd really like to have a fixed header as the userability of my application is greatly enhanced but I've tried to get this to work but to no avail so if anyone can help it would be much appreciated.
4:17 pm on June 11, 2013 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4996
votes: 14

But if you vertically scroll down from the top then magnify until the horizontal scroll bar appears and then use the horizontally scroll the top does not move.

Looking at the code, you're only giving it position: fixed when the scroll is not at the top of the page. Thus, when you're at the top and you scroll horizontally, the div is not fixed and scrolls with the body. But when you scroll down from the top, the div is given position: fixed, and therefore does not scroll horizontally with the page. If the goal is to get it to not scroll horizontally when at the top, then make sure it's always got position: fixed instead of removing and adding that class.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members