0
I need to leave the Section FAQ with a fixed position, in the images it is easier to understand what is happening 
need that Faq has a fixed position and does not change depending on the text size of the above elements
function initUlOverflow() {
const tabMenu = document.querySelectorAll('[data-tab="menu"] li');
const tabContent = document.querySelectorAll('[data-tab="content"] section');
if (tabMenu.length && tabContent.length) {
tabContent[0].classList.add('ativo');
function activeTab(index) {
tabContent.forEach((section) => {
section.classList.remove('ativo');
});
const movimento = tabContent[index].dataset.anime;
tabContent[index].classList.add('ativo', movimento);
}
tabMenu.forEach((itemMenu, index) => {
itemMenu.addEventListener('click', () => {
activeTab(index);
});
});
}
}
initUlOverflow().grid-container {
display: grid;
grid-template-columns: minmax(160px, 1fr) 3fr 300px;
grid-template-areas: "header header header" "nav nav nav" ". grid-section ." '. faq .';
}
/* UL */
.grid-section {
margin-top: 60px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
grid-gap: 20px;
}
.praias {
grid-area: grid-section;
}
.grid-section h1 {
font-size: 3.5em;
grid-column: 1 / 3;
margin-bottom: 30px;
}
.prais-lista {
height: 450px;
overflow-y: scroll;
}
/* Permite personalizar o scroll do overflow */
.prais-lista::-webkit-scrollbar {
width: 18px;
}
.prais-lista::-webkit-scrollbar-thumb {
background: #b07dfb;
border-left: 4px solid #faf6ed;
border-right: 4px solid #faf6ed;
}
.prais-lista::-webkit-scrollbar-track {
background: #faf6ed;
}
.grid-section p {
line-height: 1.4em;
margin-bottom: 15px;
}
.grid-section h2 {
margin-bottom: 20px;
}
/* FAQ */
.faq {
grid-area: faq;
}
.faq .titulo {
font-size: 3.5em;
grid-column: 1 / 3;
margin-bottom: 30px;
}<div class="grid-container">
<section class="grid-section praias">
<h1>As melhores praias de surf</h1>
<ul class="prais-lista" data-tab="menu">
<li>
<img src="img/praia1.jpg">
</li>
<li>
<img src="img/praia2.jpg">
</li>
<li>
<img src="img/praia3.jpg">
</li>
</ul>
<div class="praias-descricao" data-tab="content">
<section data-anime="show-down">
<h2>Baía Formosa, Rio Grande do Norte</h2>
<p>
A primeira da lista é, na verdade, uma cidade. Trata-se de Baía Formosa, município localizado no extremo leste do estado do Rio Grande do Norte. A sua vantagem é que ela não possui não apenas uma, mas três praias para surfar que são um deleite para os
amantes do esporte.
</p>
<p>
Depois da sessão de surf, se você quiser relaxar e aproveitar mais das belezas que a cidade oferece, a recomendação é conhecer as águas escuras da Lagoa Coca Cola e admirar o pôr do sol na Praia do Porto.
</p>
</section>
<section data-anime="show-down">
<h2>Boca da Barra – Itacaré, Bahia</h2>
<p>
Mais uma praia do Nordeste na lista. A vez agora é da Boca da Barra, localizada na cidade de Itacaré, litoral sul da Bahia. O município baiano recebe uma etapa das qualificatórias do Mundial de Surf da WSL no mês de outubro, evento conhecido como Itacaré
Surf Music. Além da competição, a praia é palco de shows musicais no período.
</p>
<p>
Boca da Barra, diferentemente das praias de Baía Formosa, não é indicadas para surfistas iniciantes. Algumas das mais longas ondas do Brasil acontecem lá, bem no meio do oceano. A orientação é difícil e as correntezas são violentas, portanto é necessário
ter muita habilidade e experiência para poder aproveitar o pico sem correr perigo.
</p>
</section>
<section data-anime="show-right">
<h2>Cacimba do Padre – Fernando de Noronha, Pernambuco</h2>
<p>
Fernando de Noronha não poderia ficar fora da lista de praias para surfar no Brasil. Com muita preservação do meio ambiente, as praias do arquipélago encantam qualquer um. Uma das principais é Cacimba do Padre, que oferece excelentes condições para os
surfistas.
</p>
</section>
</div>
</section>
<!-- FAQ -->
<section class="grid-section faq" data-anime="scroll" id="faq">
<h1 class="titulo">FAQ</h1>
<dl class="faq-lista" data-anime="accordion">
<dt>Qual a idade dos animais?</dt>
<dd>As raposas são animais mamíferos e onívoros pertencentes à família Canidae. São vulpídeos de porte médio, caracterizados por um focinho comprido e uma cauda longa e peluda.</dd>
<dt>Eles são fantásticos?</dt>
<dd>Também apresentam como particularidade suas pupilas ovais, semelhantes às pupilas verticais dos felídeos.</dd>
<dt>Qual a diferença?</dt>
<dd>As raposas são animais mamíferos e onívoros pertencentes à família Canidae. São vulpídeos de porte médio, caracterizados por um focinho comprido e uma cauda longa e peluda.</dd>
<dt>Como proteger?</dt>
<dd>Também apresentam como particularidade suas pupilas ovais, semelhantes às pupilas verticais dos felídeos.</dd>
</dl>
</section>
</div>