Reputation: 21
So I have this webpage where the whole html's overflow is hidden
html {
overflow: hidden;
}
and then I have a nav bar that has anchor links and a div that has the content which has an overflow auto, thus it's scrollable.
Nav:
<ul>
<li><a href="#events">Events</a></li>
<li><a href="#jazz">Jazz</a></li>
<li><a href="#weddings">Weddings</a></li>
</ul>
Content div:
<div class="content">
<div id="events">Events</div>
// content
<div id="jazz">Jazz</div>
// content
<div id="weddings">Weddings</div>
// content
</div>
Now, my problem is when you click on a link on the nav, like for example jazz, the whole page just goes to the top, everything: the nav, the div content and obviously, the div shows the jazz section . Is there a way where everything just stays in place and the div content box just scrolls to a certain section?
Thanks!
Upvotes: 1
Views: 2700
Reputation: 405
It's not pretty but might help you where you wanna get
http://jsfiddle.net/maximhash/8ts7qzj3/
<ul id="nav">
<li><a href="#events">Events</a></li>
<li><a href="#jazz">Jazz</a></li>
<li><a href="#weddings">Weddings</a></li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="content">
<div id="events">Events</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="jazz">Jazz</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="weddings">Weddings</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
#nav{
position: fixed;
top: 0;
z-index: 999;
background: orange;
}
.content{
position: relative;
top: 10px;
overflow: auto;
height: 500px;
display: block;
}
Upvotes: 1
Reputation: 1053
Just make content overflow: scroll; In this case scroll works for conteiner and not for html.
.content{
/* */
overflow: scroll;
}
Demo here http://jsfiddle.net/bvvhy6jj/
Upvotes: 2
Reputation: 366
I think as far as i understand you want your navigation staying fixed. So you have to set it 'fixed' :
ul {
position:fixed;
}
Upvotes: 0
Reputation: 694
Given the information you provided I wasn't able to reproduce your issue. Or maybe I'm not understanding your question.
The following (which I built off your code) works the way you seem to want it to.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {overflow: hidden;}
div#content {height: 1500px;}
div#events {height: 500px;background-color: green;}
div#jazz {height: 500px;background-color: red;}
div#weddings {height: 500px;background-color: blue;}
</style>
</head>
<body>
<ul>
<li><a href="#events">Events</a></li>
<li><a href="#jazz">Jazz</a></li>
<li><a href="#weddings">Weddings</a></li>
</ul>
<div class="content">
<div id="events">Events</div>
// content
<div id="jazz">Jazz</div>
// content
<div id="weddings">Weddings</div>
// content
</div>
</body>
</html>
Do you intend to pin the Navigation at the top of the window even when the user scrolls to lower content? If so see this SMINT tutorial on how to build a one page site with a sticky navigation bar. And then buy him a coffee :)
Upvotes: 1