Prevent page scrolling to top upon adding fixed position

Question

I\'m facing a problem where the page is scrolling to the top whenever I add my .noscroll class to the body. This way the scrollbar is still visible but greyed out w

Answer 1

I believe this is what you are looking for.

Hope you enjoy this fiddle. I took the one you referenced at the end of your question and re-worked it the way you wanted.

I happened to have done something similar to this on my site but I never restricted the scrolling underneath until now.

---

Javascript + jQuery:

$(document).ready(function () {
    var offsetY = window.pageYOffset,
        $body = $('body'),
        $win = $(window),
        $close = $('.close'),
        $open = $('.open'),
        $holder = $('#popupholder'),
        $stuff = $('#stuff');
    // Close with 'esc' key
    $(document).keyup(function (e) {
        if (e.keyCode == 27) $close.trigger('click');
    });
    $open.click(function () {
        offsetY = window.pageYOffset;
        // Block scrolling
        $body.css({
            'position': 'fixed',
                'color': '#FFFF00',
                'backgroundColor': '#00D',
                'top': -offsetY + 'px'
        });
        // Show popup
        $holder.css('display', 'block');
    });

    $close.click(function () {
        // Allow scrolling again
        $body.css({
            'position': 'static',
                'color': '',
                'backgroundColor': ''
        });
        /**
         * Remove the following scrollTop()'s if you want.
         * just a UI tweak that the user would expect.
         **/
        // Make the page stay at the position it was at before the overlay
        $win.scrollTop(offsetY);
        // Reset the overlay scroll position to the top
        $stuff.scrollTop(0);
        // Hide popup
        $holder.css('display', 'none');
    });
});

CSS:

#popupholder {
    max-height: none;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.75);
    display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
#wrap {
    max-height: none;
    position: fixed;
    overflow: hidden;
    top: 60px;
    right: 60px;
    left: 60px;
    bottom: 60px;
    background-color: rgba(155, 155, 134, 0.5);
    display: block;
}
#stuff {
    max-height: 100%;
    position: absolute;
    overflow-y: scroll;
    top: 0;
    /* If you want the scrollbar inside the overlay to show up, set right: 0; */
    right: -20px;
    left: 0;
    bottom: 0;
    padding: 10px;
}

HTML:

(abridged version)

    

        

            Close me
            
 Inside information 
            Close me
        
    
Popup

Original code credit goes to this answer. Code was highly altered but credit given where credit is due.