CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nikunj Madhogaria
Nikunj Madhogaria

Reputation: 2287

Make a particular section of web page scrollable

I have a particular page where navigation is done just by clicking.

For this purpose I have set the following css:

body{
    overflow:hidden;
}

Now, to navigate to a particular section of my page the link must be visible, otherwise I'm stuck at that position. This requires that a certain portion of my page should be "scrollable".

In the following fiddle I'm stuck at "Div3": Fiddle

How do I make my page "scrollable" when it is displaying "Div3", otherwise not.

EDIT:

I can't use overflow-y: scroll; for my "Div3" since it covers the full width of my page. Adding that shifts the contents of "Div3" which I do not want.

Upvotes: 0

Views: 2043

Answers (3)

matthias_h
matthias_h

Reputation: 11416

As you just mentioned in your comments below the OP: The effect on the mentioned website http://www.fontwalk.de/03/ that you want to have as result - just in case you don't know - is called parallax scrolling; just check some of the examples here: Parallax examples. If that's what you want, I guess you'd like to check the instructions e.g. given here: Parallax scrolling tutorial. At least as a starting point, because the second tutorial offered there for "advanced parallax" isn't for free.
The scroller used for this tutorial as well as for many websites is the free skrollr.js.

In case that shouldn't be what you're after just update that in your question like you did previously with the overflow-y: scroll.

Upvotes: 0

Claudiu Creanga
Claudiu Creanga

Reputation: 8366

I know this is an ugly solution:

$(window).scroll(function() {
    $('#message').text("Current scroll position: " + $(this).scrollTop());//added to see the scroll position
     var pixels_to_top = $(this).scrollTop();
        var your_value_min = 810;
            var your_value_max = 857;
        if (pixels_to_top > your_value_min && pixels_to_top<your_value_max){
             $("body").css("overflow","auto");
           }
    else{
     $("body").css("overflow","hidden");
    }
});

http://jsfiddle.net/Loy6z2kt/18/

You have to adjust the min and max values to your needs.

Upvotes: 0

Robert
Robert

Reputation: 261

Just make #div3 scrollable by adding an extra container around its content, like this:

<div id="div3">
    <div class="content">
        <h3>Div 3</h3>
        <a href="#div4">Next</a>
        <a href="#div2">Prev</a>
    </div>
</div>

Then modify your CSS to force that container to scroll:

#div3 {
    overflow-y: scroll;
}

The updated fiddle shows how this works in practice.

Edit

If what you really want is to see if #div3 is the only one currently in the viewport AND that the entire viewport is taken up by it, the JS (using jQuery) would look something like this:

var $div3 = $('#div3'),
    div3Top = Math.round($div3.offset().top),
    div3Bottom = $div3.height() + div3Top,
    $window = $(window),
    $body = $('body');

$(window).on('scroll', function() {

    console.log($window.scrollTop());
    console.log(div3Top);    
    console.log(div3Bottom);

    if (($window.scrollTop() >= div3Top) && ($window.scrollTop() + $window.height()) < div3Bottom + 5) {
        $body.css('overflow', 'scroll');
    } else {
        $body.css('overflow', 'hidden');
    }
});

This isn't perfect, but should demonstrate the idea well enough.

Updated fiddle here.

Upvotes: 1

Related Questions