div fixed pos x but scrolls y
hi all,
hope someone can help me out here - i have a div at the top of a page which is fixed in it's position - so when the page is scrolled either vertically or horizontally it stays right where it should be.
but now i need it to stay fixed when the page is scrolled horizontally but to scroll with the top of the page if scrolled vertically.
i found some code that does a similar thing, only, the other way round scrolls horizontally but stays fixed vertically - if you have a look at the code below - cut and paste it into a page and resize the window until you get the bars, you see what i mean...
how do i rewrite that script so it stays put horizontally but scrolls vertically - im all googled out trying to find the correct syntax(?) for it...PHP Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Scroll Horizontally</title>
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script>
$(document).ready(function() {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({width: width, height: height});
$('#mask').css({width: mask_width, height: height});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
</script>
<script>
$(window).scroll(function () {
$("#footwrap").css({top: -$(window).scrollTop()});
});
</script>
<style>
body {
height:100%;
width:100%;
margin:0;padding:0;
}
#wrapper {
width:100%;
height:100%;
position:fixed;
top:0;
left:-1px;
background-color:#ccc;
overflow:auto;
}
#mask {
width:500%;
height:100%;
background-color:#eee;
}
.item {
width:20%;
height:100%;
float:left;
background-color:#ddd;
}
.content {
width:400px;
height:300px;
top:20%;
margin:0 auto;
background-color:#aaa;
position:relative;
}
.selected {
background:#fff;
font-weight:700;
}
.clear {
clear:both;
}
#foot { background-color:#f00;
padding: 0 1em; /* cosmetic, makes beginning and end of text lines more legible */
}
#footwrap { background-color:#036;
position:fixed;
top:0;
left:0;
width: 100%; /* Only required for IE 7, if it becomes a problem for others, make it conditional */
z-index:100;
}
</style>
</head>
<body>
<div id="footwrap"><br>
<div id="foot">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut dui nec massa gravida elementum. Aliquam tempor vehicula augue, tempus consectetur dui sollicitudin nec. Pellentes</div>
<br>
</div>
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">item1
<a href="#item1" class="panel">1</a> |
<a href="#item2" class="panel">2</a> |
<a href="#item3" class="panel">3</a> |
<a href="#item4" class="panel">4</a> |
<a href="#item5" class="panel">5</a>
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">item2 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">item3 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">item4 <a href="#item1" class="panel">back</a></div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">item5 <a href="#item1" class="panel">back</a></div>
</div>
</div>
</div>
</body>
</html>
anyone know what i should be swapping scrollLeft for? (pageYOffset... i got that one) but i'm clueless on this at the moment
hope someone feels festive enough to put me right?
CSS Codes
Reply With Quote
Bookmarks