Click here to Skip to main content
14,603,886 members
Rate this:
Please Sign up or sign in to vote.
See more:
I wanted to build a website from scratch, I started adding nav bar which seems to work fine and after that I added a few div tags as "fixed".

I need it to be in such a way that when I scroll, the nav bar should be fixed and the rest of the content to be scrolled...


When I tried to make the nav bar fixed .. the div tag was moving above the nav bar

I have attached the project below


app.box.com/s/5iyj5jc5n3gzah5xwpyt
Posted

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

On of the ways to achieve the scrolling of some area while keeping, say, the top portion of the page in place, a very simple one, would be this:
.scrollable { style="overflow-y: scroll; height: 600px; }

Consider the following prototype HTML:
<p>You header content goes here; navigation bad, for example</p>
<div class="scrollable">
    <!-- The rest of the page goes here; it will be scrollable -->
</div>

Consider this just as a starting idea.

Some more advanced ideas: http://webdesign.about.com/od/advancedcss/qt/html-scroll-box-with-css.htm[^].

See also: http://www.w3.org/wiki/CSS/Properties/overflow[^].

—SA
   
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100