Your JQuery actually seems to be mostly working. The popup-section opens and scrolls. To stop the body underneath from scrolling, you can add this line to your existing JQuery:
$('html, body').css({ position: 'fixed'});
Or, you might prefer the effect of this instead: $('html, body').css({ overflow: 'hidden'});
If you want to undo the effect on clicking the popup section, you can reverse it in your next function:
<script>
$('#toggle-menu').click(function() {
$(this).toggleClass('active');
$('.popup-section').toggleClass('open');
$('html').toggleClass('open');
$('html, body').css({ position: 'fixed'}); //STOPS BODY SCROLL
});
$('.popup-section').click(function() {
$(this).toggleClass('active');
$('.popup-section').removeClass('open');
$('.button_container').removeClass('active');
$('html').removeClass('open');
$('html, body').css({ position: 'relative'}); //RESTARTS BODY SCROLL
});
</script>
$('#toggle-menu').click(function() {
$(this).toggleClass('active');
$('.popup-section').toggleClass('open');
$('html').toggleClass('open');
//$('html, body').css({ overflow: 'hidden'});
$('html, body').css({ position: 'fixed'});
});
$('.popup-section').click(function() {
$(this).toggleClass('active');
$('.popup-section').removeClass('open');
$('.button_container').removeClass('active');
$('html').removeClass('open');
$('html, body').css({ position: 'relative'});
});
body {
width: 230px;
}
.popup-section {
display: none;
opacity: 0;
height: 50px;
left: 0;
right: 0;
width: 100px;
overflow: scroll;
}
.popup-section.open {
display: block;
opacity: 1;
z-index: 99;
}
.popup-background {
height: 100px;
width: 200px;
background-color: #ccbcaf;
z-index: 90;
cursor: pointer;
position: fixed;
overflow: scroll;
top: 0;
}
span.top {
background: yellow;
padding: 1.2rem;
border: 1px blue solid;
margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="button_container open" id="toggle-menu">
<span class="top"><b>Toggle Menu: click</b></span>
<span class="bottom"><b></b></span>
</div>
<br />
Some text in the body. Grapes crushed and ready for fermentation are called must. The world's oldest person – at one hundred twenty-two – attributed her longevity to a diet of olive oil, port wine and chocolate. Red wines are well attributed to positive health benefits. Cork it! In the unreliable summers of northern France, the acidity of under ripened grapes was often masked with chaptalization with unsatisfactory results, whereas now the less ripe grapes are made into popular sparkling wines.
Trichloroanisole in the cork can impart musty, mouldy overtones. Such a wine is called "corked." A good wine will have a lengthy aftertaste.
So many organic compounds are in wine. Unsubstantiated rumor states that the more colorful the label, the less quality the wine. Roll the wine around your mouth with your tongue and note the different flavors. Tannic, full-bodied wines are described as chewy. The principal acid in wine is tartaric acid. Tomato and cherry flavors nestle comfortably together with notes of leather and clay in Sangiovese.
The word "sauvignon" is believed to be derived from the French sauvage meaning "wild." Wine, women, and song – not necessarily in that order. Chinon is a town in France renowned for its winemaking. Monks and monasteries of the Roman Catholic Church have had an important influence on the history of Burgundy wine. Text from www.wineipsum.com
<div class="popup-section">
<div class="popup-background" title="">
Grapes crushed and ready for fermentation are called must. The world's oldest person – at one hundred twenty-two – attributed her longevity to a diet of olive oil, port wine and chocolate. Red wines are well attributed to positive health benefits. Cork it! In the unreliable summers of northern France, the acidity of under ripened grapes was often masked with chaptalization with unsatisfactory results, whereas now the less ripe grapes are made into popular sparkling wines.
Trichloroanisole in the cork can impart musty, mouldy overtones. Such a wine is called "corked." A good wine will have a lengthy aftertaste.
So many organic compounds are in wine. Unsubstantiated rumor states that the more colorful the label, the less quality the wine. Roll the wine around your mouth with your tongue and note the different flavors. Tannic, full-bodied wines are described as chewy. The principal acid in wine is tartaric acid. Tomato and cherry flavors nestle comfortably together with notes of leather and clay in Sangiovese.
The word "sauvignon" is believed to be derived from the French sauvage meaning "wild." Wine, women, and song – not necessarily in that order. Chinon is a town in France renowned for its winemaking. Monks and monasteries of the Roman Catholic Church have had an important influence on the history of Burgundy wine. Text from www.wineipsum.com
</div>
</div>
