How to fix position of header while vertical scrolling?

HTML & CSS
1

Hi there

This is my js fiddle

what I am trying to acheive that fix position of header class while vertical scrolling down on main_block class.

How can I acheive this

2

Hi, vngx.

Are you sure that you want to base your menu on the code in the fiddle? I ask because when I first opened the fiddle in my browser, I saw a narrow view that shows…
(1) menu items overflowing the top of the page. (It is not a fluid/responsive design.)
(2) dropdown menu items that cannot be accessed on hover.
(3) the <label> tag, an inline form element which is not intended for use outside of a form, AFAIK. It’s like putting your sentences within <span> tags… which is why you have added the <br> tags after the <label>s… to break their natural inline behaviour. You might consider using a more appropriate <h#> tag or simply a <p> with a class. The appropriate tag depends on the context.

1 Like
3

In my case it is running fine

only thing is add more label in main_block so that page can be vertical scrollable and I want fix position of class .header irrespective of content in class .main_block

4

The simplest way is to make the main_block a scrollable div and then the header stays on top while you scroll it.

e.g.

.main_block{
  height:200px;
  overflow:auto;
}

If you want a sticky header then you will need a script like this.

5

overflow:auto not working

6

There is nothing overflowing so there is nothing to control. You need to set a height to that element in order to scroll the contents inside (as shown in my snippet above).

The only other choice is via a script to make a sticky header effect.

7

ok fixing height:200px only show a oveflow inside main block

What i Want that on getting down in main window scroll bar the header should also remian fixed

8

That’s what the script does that I’ve mentioned a few times now. There is no other way to do this :smile:

1 Like
12

I’ve already answered that in post #4 :smile:

I’ve already mentioned that in post #4, #6 and 7#.

Are you talking about a fixed header for the whole page or just a fixed header for .main_block?

If you want a fixed header for the whole page (i.e. a header that is always visible at the top of the page and never scrolls) then you can use position:fixed for this but you will need to pad the top of the next item on the page so that it starts below the header and not behind it. That means giving a padding top equal to the height of the fixed header.

You will need to clarify the requirements a little as its always hard to tell exactly what’s wanted with small snippets of code. :smile:

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.