CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Istiaque Ahmed
Istiaque Ahmed

Reputation: 6488

make the whole page scroll beneath a certain height at the top without any scroll bar

html:

<div class="div_fixed"></div>

<div class="other_content">

content goes here
</div>

css:

.div_fixed{
position:fixed;
height:40px;

}

.other_content{

height:200px;

}

The div_fixed will remain fixed at the top position of the page.

But as the page scrolls up, the content of the div other_content will vanish just at the lower edge of the div div_fixed .

In the case of scrolling down the invisible content of other_content will begin to be visible from the lower edge of the div_fixed

How to achieve that ?

EDIT: no scroll bar should appear for any div

Upvotes: 0

Views: 436

Answers (3)

cincodenada
cincodenada

Reputation: 3087

I've taken your HTML/CSS and added a bit on a jsFiddle - I think in order to achieve the effect you're looking for, you just need to make your content actually tall enough to be scrollable. At 200px high and one line of text, nothing is going to scroll.

So I made your other_content div taller, and then added a top: 0 to your .div_fixed selector, to keep it stuck to the top of the screen, and a margin-top: 40px to the .other_content div in order to have it start below the floating div.

If you want it to be a navbar-type thing, you can of course add a width: 100% to the .div_fixed.

All of this should transfer into a container div (with position: relative) fairly easily as well if you want, although you may have to re-position the fixed div.

Upvotes: 0

Phortuin
Phortuin

Reputation: 770

Is this what you're looking for? http://jsfiddle.net/BCRPa/

Upvotes: 0

Kuroki Kaze
Kuroki Kaze

Reputation: 8481

Use overflow: hidden to get rid of scrollbars

Upvotes: 2

Related Questions