Reveal page at specific point

Question

I'm trying to reveal a page from a specific point in this case the (div:content) further down the page.

Desired effect will have the red block at the top, however scrolling down will reveal the blue block above

HTML

<div class="block">
    block
</div>

<div class="content">
    content
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
.block {
    background: blue;
    height: 300px;
    width: 100%;
    position: fixed;
}

.content {
        background: red;
        margin-top: 300px;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        position: absolute;
}

"loading" implies inserting content from an external resource, such as an AJAX call. — Diodeus - James MacFarlane, Jan 16 '14 at 22:19
could you specify what do you really want? what i understood is: when the page reveals, you can see the red div at the top. when you start scrolling down, the blue div appears at the top (covering the red block) and it stays at the top as a fixed element. Is that you want? — bugovicsb, Jan 16 '14 at 22:36
I took the liberty of changing "load" to "reveal" as it makes much more sense. — MMM, Jan 16 '14 at 22:47

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

You are looking for: scrollTop

http://api.jquery.com/scrollTop/

Set the current vertical position of the scroll bar for each of the set of matched elements.

Example: $('body').scrollTo('#YourDiv');

There is a question related to this: jQuery scroll to element

A good library: http://mmenu.frebsite.nl/examples/responsive/index.html

Other options:

What you need is the JavaScript window.scrollTo method

window.scrollTo(xpos,ypos)

Insert the div position in there.

Or use the JQuery method ScrollTo, see an example here

$(...).scrollTo( 'div:eq(YourDiv)', 800 );

edited May 23 '17 at 11:49

Community

1
1

answered Jan 16 '14 at 23:22

Francisco Corrales Morales

3,676
1
37
64

I've updated the jsfiddle with the suggestion but seems I can't scroll when over the blue block – Rob Jan 18 '14 at 11:30
@Rob that is due cause you are using `width: 100%; height: 100%`, so, there is nothing to scroll, but if you make it larger that 100%, then you the scroll will appear. – Francisco Corrales Morales Jan 18 '14 at 18:03
@Rob I found another library, check this out: http://mmenu.frebsite.nl/examples/responsive/index.html – Francisco Corrales Morales Jan 18 '14 at 23:25

Reveal page at specific point

1 Answers1