Link to home
Start Free TrialLog in
Avatar of manal87
manal87

asked on

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

Avatar of CCSOFlag
CCSOFlag
Flag of United States of America image

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;
}
ASKER CERTIFIED SOLUTION
Avatar of imantas
imantas
Flag of Lithuania image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of manal87
manal87

ASKER

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.
Avatar of manal87

ASKER

<!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

Avatar of manal87

ASKER

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 !!
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.
Avatar of manal87

ASKER

yup, did that as well.
Cheers.
Avatar of manal87

ASKER

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:
https://www.experts-exchange.com/questions/27024923/Problem-with-fixed-DIV-in-IE-Firefox.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?