Как предотвратить изменение разделов и щелчок в любом месте окна, чтобы этот раздел перемещал предыдущий раздел в javasc ⇐ CSS

[Anonymous]

Как предотвратить изменение разделов и нажатие на этот раздел, чтобы переместить его. Я хочу, чтобы нажатие на любую часть окна не перемещало его в другой раздел, иначе оно должно оставаться там. На гифке такое странное поведение, как я его избегаю и использую event.preventDefault(); в документе, но он все равно это делает, или что я делаю неправильно, не могли бы вы мне сказать
[img]https://i.stack. imgur.com/DAevk.gif[/img]

это мой CSS-код:
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
overflow: hidden; /* Evita el desplazamiento al hacer clic */
}
.fixed-menu {
position: fixed;
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
}
.menu-content {
display: flex;
justify-content: space-between;
width: 50%;
}
.sec {
cursor: pointer;
position: relative;
}
.sec .indicator {
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 5px;
background-color: #fff;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease-in-out;
}
.sec.active .indicator {
transform: scaleX(1);
}
.section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}
#section1 { background-color: #f00; }
#section2 { background-color: #0f0; }
#section3 { background-color: #00f; }
#section4 { background-color: #ff0; } ```

this is my html code:

```

Logo
Sección 1
Sección 2
Sección 3
Sección 4
Login


Sección 1
Sección 2
Sección 3
Sección 4 ```

this is my javascript code:

``` var sections = Array.from(document.querySelectorAll('.section'));
var menuItems = Array.from(document.querySelectorAll('.sec'));
var currentIndex = 0;

function updateMenu() {
menuItems.forEach((item, index) => {
if (index === currentIndex) {
item.classList.add('active');
} else {
item.classList.remove('active');
}
});
}

function navigateTo(index) {
if (index >= 0 && index < sections.length) {
currentIndex = index;
window.scrollTo(0, sections[currentIndex].offsetTop);
updateMenu();
}
}

updateMenu(); // Actualiza el menú inicialmente

// Evita que la página salte o se desplace al hacer clic en cualquier parte de ella
document.addEventListener('click', function(event) {
event.preventDefault();
}, false); ```


Подробнее здесь: https://stackoverflow.com/questions/783 ... hat-sectio