Member Avatar for rusty813

I have element that I want to be a fixed position in css, but that specific when it is set to position: fixed; it causes my scrollbar to be disabled...why is that and what do i need to do to fix this...i do want this element to be fixed so when i scroll up and down the page its still in the same area... thanks

the css tag is i am talking is .profiles {position: fixed;}

here is the website on a test server if you want to see what i am talking about 

<!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></title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
</head>
  
<body bgcolor="#000000">  
<div id="container">
  <div id="header">
    <div class="logo"></div>
    <div class="nav">
      <ul>    
        <li><a href="">***</a></li> |  
        <li><a href="">***</a></li> |
        <li><a href="">***</a></li> |
        <li><a href="">***</a></li> |
        <li><a href="">***</a></li> |
        <li><a href="">***</a></li> |
        <li><a href="">***</a></li> |
        <li><a href="">***</a></li>
      </ul>
    </div>
  </div>
  <div id="content">
    <div class="profiles">
    <ul>
      <li><a href="" title=""><img src="_files/thumb001.png" alt="***"/>***</a></li>
      <li><a href="" title=""><img src="_files/thumb002.png" alt="***"/>***</a></li>
      <li><a href="" title=""><img src="_files/thumb003.png" alt="***"/>***</a></li>
      <li><a href="" title=""><img src="_files/thumb004.png" alt="***"/>***</a></li>
      <li><a href="" title=""><img src="_files/thumb005.png" alt="***"/>***</a></li>
      <li><a href="" title=""><img src="_files/thumb006.png" alt="***"/>***</a></li>
      <li><a href="" title=""><img src="_files/thumb007.png" alt="***"/>***</a></li>
    </ul> 
    </div>	


       <table width="100%" cellpadding="0" cellspacing="0" border="0">
	    <tr>
              <td width="230" valign="top">
                <div align="center" id="mainphoto">
                  <a href=""><img src="images/profiles/***.png" class="profile_image" border="0" alt=""/></a>
                </div>
	          </td>
		</tr>
		</table>
       <table class="maintable" cellpadding="0" cellspacing="0" border="0" align="center">
             <tr>
               <td id="info" valign="top">
                 <h1>***</h1>
                   Female<br />
                   26 years old<br />
                   Houston, Texas, US<br />
               </td>
			 </tr>
			 <tr>
			   <td>
                 <div class="head">About me</div>
                 <div class="post"><p>Text here Text hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText hereText here</p></div>
               </td>
	         </tr>
       
   <br />
   <tr>
   <td>
    <div class="gallery">
      <ul>
        <li><a href="images/profiles/model_1/image001.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image001.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image002.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image002.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image003.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image003.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image004.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image004.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image005.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image005.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image006.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image006.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image007.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image007.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image008.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image008.jpg" width="100" height="100" border="0" alt=""/></a></li>
        <li><a href="images/profiles/model_1/image009.jpg" rel="lightbox[model_1]" title="my caption"><img src="images/profiles/model_1/image009.jpg" width="100" height="100" border="0" alt=""/></a></li>						
      </ul>
    </div>
	</td>
	</tr>
	</table>
  </div>
</div>
</body>
</html>
#header {
	position: fixed;
	z-index: 999;
}

.logo {
	position: fixed;
	background-image: url(../images/logo/logo2.png);
	width: 567px;
	height: 252px;
	top: 8px;
	left: 775px;
}

.nav {
	position: fixed;
	top: 70px;
	left: -20px;
}

.nav a{
	text-decoration: none;
	font-family: segoe script;
	font-weight: bold;
	font-size: 16px;
	color: #ec2c49;
}

.nav ul {
	word-spacing: 8px;
	font-family: segoe script;
	color: #ec2c49;
}

.nav ul li {
	display: inline;
}

#content {
	position: relative;
	top: 125px;
}
#fadeshow1, #fadeshow1 .gallerylayer {
	position: relative;
	background-color:transparent!important;
	left: 20px;
	z-index: 997;
}

#text1 {
	position: absolute;
	top: 100px;
	left: 550px;
	width: 550px;
	font-family: "segoe script";
	font-size: 20px;
	color: #4b2701;
	font-style: italic;
	font-weight: bold;
	z-index: 998;
}

.blog {
	position: relative;
	left: 200px;
}


.maintable {
	color: #ffffff;
	position: absolute;
	top: -25px;
	left: 220px;
	width: 60%;
}

.gallery ul {
	border-style: none;
	word-spacing: 8px;
	font-family: segoe script;
	color: #ec2c49;
}

.gallery ul li {
	display: inline;
}

.profiles {
	position: fixed;
}

.profiles img {
	border: 0;
}

.profiles ul {
	margin: 0;
	list-style-type: none;

}

.profiles li {
	margin: 2px 0;
	padding: 4px;
	background: url(../images/profilebg/individual_bg.png) no-repeat;
	height: 62px;
	width: 151px;
}

.profiles li img {
	vertical-align: middle;
	margin-right: 20px;
}

.profiles li a {
	font-family: segoe script;
	font-weight: bold;
	color: #e6930f;
	text-decoration: none;
	font-size: 15px;
}
  • 3 Contributors
  • 2 Replies
  • 195 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Bestwebdesign

Dani AI

Generated

Quick diagnosis: making the profiles column fixed removes it from the document flow, so its height no longer contributes to the page. If much of the page was positioned (absolute/fixed) already, the remaining in-flow content can be too short for a scrollbar — the browser then shows no page scroll even though the fixed sidebar visually extends past the viewport. That fits ’s observation (scrollbar reappears when resizing) and explains why ’s advice to stop fixing everything (for example the nav) is sound.

Two practical ways to fix it:

  • Keep the sidebar visually fixed but still reserve layout space for it (so the document stays tall). Make the sidebar fixed with explicit top/left/width, limit its height to the viewport, and let it scroll internally. At the same time give the main content a left margin equal to the sidebar width so content doesn’t get overlapped.
/* reserve space and make the sidebar scrollable inside the viewport */
.profiles {
  position: fixed;
  top: 120px;
  left: 20px;
  width: 160px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}
#content {
  margin-left: 200px;
  padding-top: 130px;
}
  • Or keep the profiles element in normal flow and use modern position: sticky on its container so it behaves like a fixed sidebar after the page scrolls, but still contributes to document height (avoids the lost-scroll issue).

Quick checklist to debug this type of problem:

  • Toggle the profiles rule in the browser dev tools: if the scrollbar returns when it’s not fixed, flow removal is the cause.
  • Search for any overflow: hidden on html/body or parent containers.
  • Avoid applying CSS transform to ancestors of a fixed element (it creates a new stacking context and changes behavior).
  • Reduce the number of fixed/absolute elements; prefer flow-based layout (floats/flex/grid) for main content, then fix only the elements that truly must be pinned.

Recommended Answers

All 2 Replies

Member Avatar for bvelez352

I copy/paste the code and when I resize it the scroll bar is there.

Member Avatar for Bestwebdesign

Hi,

You had inserted position fixed in the nav class also, so delete that one.

logo {
	position: fixed;
	background-image: url(../images/logo/logo2.png);
	width: 567px;
	height: 252px;
	top: 8px;
	left: 775px;
}
 
.nav {
	top: 70px;
	left: -20px;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.