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.
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;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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.
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>
<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
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.s crollLeft, y : document.body.parentNode.s crollTop };
};
window.onscroll = function(e) {
document.getElementById('n av').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 !!
<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.s
};
window.onscroll = function(e) {
document.getElementById('n
};
-->
</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.
ASKER
yup, did that as well.
Cheers.
Cheers.
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?
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?
#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;
}