DIV "fixed" only for horizontal scrolling

I'm totally new to this, half the language on this site i have trouble understanding but i'm going to give this a shot anyway. I would really appreciate your help.

I am a graphic designer and not a programmer/developer so I'm having a lot of trouble here.

I am building a portfolio website with a navigation bar that remains "position: fixed" as you scroll horizontally ONLY. I do not want it to remain that way when scrolling up and down (vertically). In other words i do not want it "following me" when scrolling up & down.

Please tell me this is possible through CSS.
Thanks in advance.

@charset "UTF-8";
/* CSS Document */

#container {
	background-image: url(container.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	margin-top: 0px;
	margin-left: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	overflow: auto;
	position: absolute;
	z-index: 1;
	left: 0%;
	top: 0%;
	width: 7500px;
	height: 3000px;
}

#navigation {
	padding: 0px;
	margin-top: 152px;
	margin-left: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	position: fixed; 
	z-index: 100;
	left: 0%;
	top: 0%;
	width: 285px;
	height: 603px;
}

Open in new window

manal87Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CCSOFlagCommented:
So I'm assuming you want it to stay at the top.  IF so remove the bold code below and let me know if that it what you are after:


#container {
      background-image: url(container.jpg);
      background-repeat: no-repeat;
      padding: 0px;
      margin-top: 0px;
      margin-left: 0px;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
      overflow: auto;
     position: absolute;
     z-index: 1;
     left: 0%;
      top: 0%;

      width: 7500px;
      height: 3000px;
}

#navigation {
      padding: 0px;
      margin-top: 152px;
      margin-left: 0px;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: none;
      border-left-style: none;
     position: fixed;
      z-index: 100;
      left: 0%;
      top: 0%;

      width: 285px;
      height: 603px;
}
0
imantasCommented:
CSS doesn't allow you to make element partially fixed. You will definately need something like javascript to scroll the element only horizontally, but even in that way, you won't achieve smooth scrolling. Please take a look at this example I've wrote for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Blank page</title>
</head>
<body style="width: 5000px; height: 5000px">
<div id="nav" style="position: absolute; top: 0px; left: 0px; width: 300px; height: 30px; border: 1px solid black; background-color: silver">
  This is a partially fixed DIV
</div>
<div style="height: 30px">&nbsp;</div>
<font style="font-size: 20pt">Here is some other page content</font>
<script type="text/javascript">
<!--
window.pos = function() {
  if (window.scrollX != null && window.scrollY != null) return { x: window.scrollX, y : window.scrollY };
  else return { x: document.body.parentNode.scrollLeft, y : document.body.parentNode.scrollTop };
};

window.onscroll = function(e) {
  document.getElementById('nav').style.left = window.pos().x + 'px';
};
-->
</script>
</body></html>

Open in new window


(this is a full HTML page, so you just need to save it and open in the browser).

Is this what you need? This is not achievable with CSS only.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
manal87Author Commented:
Hey guys, thanks for the quick help.

Removing the bold code didn't work.

imantas: the partially fixed grey box is exactly what i'm trying to achieve with my navigation bar!
Except i have no idea how to apply the code you gave me to my site. Is that javascript?

excuse the ignorance and thanks again.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

manal87Author Commented:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MANAL</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="navigation"><img src="nav_off/off_02.jpg" width="218" height="151" /><img src="nav_off/off_03.jpg" width="149" height="24" /><img src="nav_off/off_05.jpg" width="192" height="22" /><img src="nav_off/off_07.jpg" width="172" height="22" /><img src="nav_off/off_09.jpg" width="218" height="68" /><img src="nav_off/off_10.jpg" width="159" height="26" /><img src="nav_off/off_12.jpg" width="134" height="20" /><img src="nav_off/off_14.jpg" width="218" height="22" /><img src="nav_off/off_15.jpg" width="189" height="24" /><img src="nav_off/off_17.jpg" width="189" height="33" /><img src="nav_off/off_18.jpg" width="97" height="17" /></div>
<div id="container"></div>
</body>
</html>
here's my html

Open in new window

0
manal87Author Commented:
Wow ... I actually figured out how to apply your code ... i just copy pasted this part:

<script type="text/javascript">
<!--
window.pos = function() {
  if (window.scrollX != null && window.scrollY != null) return { x: window.scrollX, y : window.scrollY };
  else return { x: document.body.parentNode.scrollLeft, y : document.body.parentNode.scrollTop };
};

window.onscroll = function(e) {
  document.getElementById('nav').style.left = window.pos().x + 'px';
};
-->
</script>
</body></html>


and replaced ('nav') with the name of my navigation file.

That's it right? :p

thanx !!
1
imantasCommented:
I suppose that should've worked. I think you did it correctly. Except that your DIV needs to have "position: absolute", which you didn't mention in your comment, but please note that for future.
0
manal87Author Commented:
yup, did that as well.
Cheers.
0
manal87Author Commented:
Hi imantas,

After uploading everything to the remote site and testing the code on all browsers I've come to realize one problem with the javascript code:

There is major jerking of the navigation bar when scrolling sideways in all browsers (except safari).
I've addressed the issue in this thread:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_27024923.html

But no solution yet. I've been advised to use jquery code. It fixed the jerking problem, but the navigation bar remains fixed both horizontally and vertically.

Any suggestions?
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Scripting Languages

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.