How to leave scroll of a div as main scroll?

Asked

Viewed 204 times

0

I made a page in bootstrap and also a smooth scroll, but this scroll is not of the page but of a div.

The main scroll of the page I took, and the page itself is inside that div.

Is there any way I can leave the div scroll as main? As soon as they enter the page they need to click to scroll down the bar.

And I also need to change one class once I scrolled the page from a certain value, but it doesn’t change because in my code it takes the scroll from the body, but I wanted it to take the scrol from the div.

Follow my code below:

window.onscroll = function() {myFunction()};

var header = document.getElementById("banner");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky-top");
  } else {
    header.classList.remove("fixed-bottom");
  }
}
<div class="main">

a pagina em si esta aqui junto com scroll
</div>

javascript css div rolling

  • Dude you want the menu to stay fixed when scrolling the page ?

  • more because you need to use the scroll of the div being that can customize the scroll of the browser? alias, the right one was for you to do this scroll in the <body> tag for hierarchy.

  • Good night, you guys. So it’s because I need the smoth scroll property and it just works that way, in the body tag I already tried and it didn’t work. The main reason was more for this and because of the smoth separate it by Section

  • Hugo na vdd, I want as soon as I enter the page the navbar stay below and as soon as I roll the page I came up

1 answer

1

Dude vc don’t even need JS to do all this. To fix the menu at the top after running the screen just use position:stiky and to do the scroll soft you can use the scroll window pattern, simply declare the behavior of scroll as smooth in the HTML

Look at this image, in this codex has ZERO JS, and almost no CSS

inserir a descrição da imagem aqui

Test yourself :D

html {
    overflow-y: scroll;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-size: 30px;
    background-image: linear-gradient(to bottom, tomato 0%, azure 100%);
}

#ancora {
    margin-top: 150vh;
    margin-bottom: 50vh;
}

.menu {
    background-color: green;
    top: 0;
    position: sticky;
}
<div style="height: 100px;">um div qq</div>
<div class="menu">
    <a href="#ancora">link menu</a>
</div>

<div id="ancora">ancora</div>

Browser other questions tagged javascript css div rolling

You are not signed in. Login or sign up in order to post.