Запретить прокрутку страницы сверху при добавлении фиксированной позиции

Я столкнулся с проблемой, когда страница прокручивается вверх, всякий раз, когда я добавляю свой класс .noscroll в тело. Таким образом, полоса прокрутки все еще видна, но отображается серым цветом всякий раз, когда появляется оверлей.

Я знаю, что это функция addClass(), которая является причиной этого, потому что, когда я прокомментирую эту строку, она не прокручивается вверху, когда появляется мой оверлей.

JQuery

$('a').click(function(e) {
    //reset default anchor behavior
    e.preventDefault();

    //add noscroll class to body
    $("body").addClass("noscroll"); 

    //open overlay box
    openOverlayBox(); 
});

Функция openOverlayBox() представляет собой просто полный набросок экрана браузера с черным оттенком.

CSS

body.noscroll{
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}

Тело HTML

<a href="#">Test</a>

Как заставить положение прокрутки оставаться неизменным после того, как класс .noscroll был добавлен в тело?

РЕДАКТИРОВАТЬ 1: Я пытаюсь добиться того же, что и на Facebook. Если вы просматриваете изображение или видео, появляется оверлей, полоса прокрутки выделена серым цветом, но положение прокрутки сохраняется.

EDIT 2: Я нашел очень близкое решение к моей проблеме, но единственное, что это не делает серой полосу прокрутки, но просто удаляет его. Кроме того, когда контент центрируется посередине, он все же делает контент немного чуть-чуть направо, потому что полоса прокрутки из тела скрыта.

РЕДАКТИРОВАТЬ 3: После ответа Куберто и некоторых исследований о себе я узнал, что нужно сделать, чтобы заставить его работать, я хочу. Однако я не знаю, как я начну это делать. Но это то, что должно его решить. Я, открывая оверлей, должен установить мой главный div на position: fixed и отрицательное верхнее значение положения прокрутки. При выходе из оверлея атрибут position: fixed; и top должен быть удален и та же позиция прокрутки, что и при открытии оверлея.

Ответы

Ответ 1

Внимательно взглянув на то, как это делает facebook, это примерно так:

<body>
  <div class="main" style="position: fixed; top: -400px"></div>
  <div class="overlay" style="position: absolute; width: 100%; height: 100%"></div>
</body>

Извините за встроенные стили. Вам необходимо программно установить основной стиль div top в положение прокрутки.

Ответ 2

Я считаю, что это то, что вы ищете.

Надеюсь, вам понравится эта скрипка. Я взял тот, на который вы ссылались в конце вашего вопроса, и переработал его так, как вы хотели.

Мне довелось сделать что-то подобное на моем сайте, но я до сих пор не ограничивал прокрутку.

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() 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:

(сокращенная версия)

<div id="popupholder">
    <div id="wrap">
        <div id="stuff">
            <button class="close">Close me</button>
            <p> Inside information </p>
            <button class="close">Close me</button>
        </div>
    </div>
<button class="open">Popup</button>

Оригинальный кредитный код отправляется на этот ответ. Код был сильно изменен, но кредит был предоставлен там, где должен быть кредит.