Member Avatar for PDB1982

I'm trying to see if there is a way to have my navigation bar follow the user as he/she scrolls down the page....I think it might have to do with JAVA, but I wanted to see if anyone knew a css trick first.

HTML Code:

<div id="sidebar">
<ul class="sidenav">
	<li>
		<a href="#">History of HTML
		<span>A brief, but informative, look into the inception of HTML and it's 

effect on the transition of the internet.</span>
		</a>
	</li>
	<li>
		<a href="#">Beginner's Guide
		<span>A look into the basic coding guidlines, and steps to take, in order to 

create your own web page.</span>
		</a>
	</li>
	<li>
		<a href="#">HTML and UNIX
		<span>Take a look at the connection that HTML and UNIX share with respect to 

sharing information and processing code.</span>
		</a>
	</li>
	<li>
		<a href="#">WYSIWYG Editors
		<span>Learn the differences between Basic, Souce Code, and WYSIWYG Editors 

when creating and finalizing your web page.</span>
		</a>
	</li>
</ul>
</div>

CSS code:

ul.sidenav {
	font-size: 1.2em;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #005094;
	border-bottom: 1px solid #3373a9;
	border-top: 1px solid #003867;
}

ul.sidenav li a{
	display: block;
	color: #fff;
	text-decoration: none;
	width: 175px;
	padding: 10px 10px 10px 35px;
	background: url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #3373a9;
	border-bottom: 1px solid #003867;
}

ul.sidenav li a:hover {
	background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
	border-top: 1px solid #1a4c76;
}

ul.sidenav li span{  display: none; }

ul.sidenav li a:hover span {
	display: block;
	font-size: 0.8em;
	padding: 10px 0;
}
  • 2 Contributors
  • 6 Replies
  • 130 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by PDB1982

Dani AI

Generated

A quick recap and a few practical options that build on and : using a persistent sidebar works, but there are modern, layout-friendly ways to do it and a few pitfalls to watch for.

Use CSS position:sticky when possible — it keeps the nav in the normal flow until the scroll reaches a threshold, then it "sticks" to the viewport. It plays nicer with layout (no need to float the element out of flow) and avoids the common overlap issues that come with fixed elements. Example layout using CSS Grid:

.container {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

#sidebar {
  position: -webkit-sticky;
  position: sticky;
  top: 12px;
}

For small viewports switch the sidebar back to normal flow so it doesn't eat screen space:

@media (max-width: 700px) {
  .container { grid-template-columns: 1fr; }
  #sidebar  { position: static; }
}

Notes, gotchas and accessibility:

  • If the page uses float on the sidebar now, remove it when switching to sticky/fixed; floats and sticky often produce layout surprises.
  • Add an explicit z-index to keep the nav above content and give the main column left padding or grid space so the nav does not cover text.
  • position:sticky is not supported in older IE; provide a small JavaScript fallback that toggles a pinned class when the scroll passes the sidebar's top offset if IE support is required.
  • Make sure keyboard and screen-reader users can bypass persistent nav (a visible skip-to-content link or logical DOM order helps).

Compatibility and reference reading: see the CSS positioning docs at MDN: position and browser support notes for sticky at Can I use: CSS position:sticky.

Recommended Answers

All 6 Replies

Member Avatar for ShawnCplus

Use position:fixed which will keep the element in the same place on the screen even if the user scrolls the page. Also, Java != Javascript

Member Avatar for PDB1982

I have tried using position: relative; within the ul.sidenav portion, but it's still stuck in the left corner.....any other ideas? Should I use the relative position in all portions?

Also, I don't know if it makes a distance, but I am using IE 7...

Edited by PDB1982 because: n/a
Member Avatar for ShawnCplus

I have tried using position: relative; within the ul.sidenav portion, but it's still stuck in the left corner.....any other ideas? Should I use the relative position in all portions?

Also, I don't know if it makes a distance, but I am using IE 7...

When you use position:fixed you have to use the left and top CSS properties to position it on the page.

Member Avatar for PDB1982

When you use position:fixed you have to use the left and top CSS properties to position it on the page.

do you mind passing on a quick example? Would they be auto?

Member Avatar for ShawnCplus

do you mind passing on a quick example? Would they be auto?

ul#navigation {
  position: fixed;
  top: 10px;
  left: 10px;
}
/* place the ul with the ID navigation 10px from the top-left corner of the screen */
Member Avatar for PDB1982 
ul#navigation {
  position: fixed;
  top: 10px;
  left: 10px;
}
/* place the ul with the ID navigation 10px from the top-left corner of the screen */

so, I would add it to my code as:

ul.sidenav {
	font-size: 1.2em;
	float: left;
	width: 200px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #005094;
	border-bottom: 1px solid #3373a9;
	border-top: 1px solid #003867;
	position: fixed;
	top: 10px;
	left: 10px;
}

....And it works.....I have to adjust the height for my logo, but all is well! Thanks a ton!

Edited by PDB1982 because: n/a
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.