Question 194776 in Html Question posted in
Some basic documentation can be found here.

Html – How can I make an element stick to the bottom of the page when scrolling up?

What I’m trying to accomplish is shown here: https://imgur.com/a/YFcfO3N

Basically I want a menu that sits at the bottom of the page and when you scroll up it sticks to the bottom of the page.

Tags:

2

Answers


  1. 0

    To keep the menu at the bottom of the page and stick to it when scrolling up, you can set the menu position to position: fixed;

    here is the example code

    <!DOCTYPE html>
<html>

<head>
    <title>Sticky Bottom Menu</title>
    <style>
        #bottom-menu {
            position: fixed; /*this will fix the menu position*/
            bottom: 25px; /*this will give the menu offset from bottom position*/
            left: 30%;
            right: 30%;
            height: 50px;
            background-color: #DDD;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div>
        <p>text...</p>
        <p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p><p>text...</p>
    </div>

    <nav id="bottom-menu">
        <!-- Menu items go here -->
    </nav>
</body>

</html>
    Login or Signup to reply.
  2. 0

    I just took a look in the developer console at https://imgur.com/a/YFcfO3N and it seems, they use a container for the footer with the class "Footer-wrapper" with the following CSS attributes:

    .Footer-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

    When scrolling down, there is another class added to the container, "down":

    .down {
    bottom: -60px;
}

    The negative position must correspond to the height of the footer / menu.

    I think, they’re doing this with JavaScript. You can check whether the user is at the top of the page in JavaScript like this:

    let userIsAtTheTopOfThePage = window.pageYOffset === 0;

    The class can be added to the element like this:

    element.classList.add("my-class");

    and removed like this:

    element.classList.remove("my-class");

    I hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search