CODEWITHSUNDEEP
htmldebuggingpositionfooter
cjdjdude _
cjdjdude _

Reputation: 1

How do I make the footer only visible when you scroll to the very bottom of the page instead of always being visible?

So I'm working on a project for school with writing a website. I have a header section that acts as a navbar, a main_body section that acts as the floating block with all the info on the inside, and a footer section that has the links to our client's facebook and a link to the help page. No matter what I do though, I can't seem to get the footer to only be visible when I scroll all the way down the page. Here's what I have for the html. (Some data omitted for privacy)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
    <!--I'm not going to write this for every page, but the below line is how a favicon is declared.-->
    <link rel="icon" type="image/jpg" href="images/about_ali_favicon.jpg">
    <link rel="stylesheet" href="css/global_stylesheet.css">
</head>

<body>
<!--I'm not going to write this for every page, but this is the header section to be used as the navbar-->
<header>
    <!--I'm not going to write this for every page, but this nav element is how I made the navbar. This is where every navlink is declared as well as how they transfer from page to page-->
    <nav id="navbar">
        <div id="hamburger_menu" onclick="toggleMenu()">☰</div>
        <ul id="nav_links">
            <li><a href="about_ali.html" target="_blank" rel="noopener noreferrer">About Me</a></li>
            <li>
                <a href="#">Dip&apos;In Delicious</a>
                <ul class="dropdown">
                    <li><a href="dip_in_delicious_about.html" target="_blank" rel="noopener noreferrer">About</a></li>
                    <li><a href="dip_in_delicious_store.html" target="_blank" rel="noopener noreferrer">Store</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Firefly Nights</a>
                <ul class="dropdown">
                    <li><a href="firefly_nights_about.html" target="_blank" rel="noopener noreferrer">About</a></li>
                    <li><a href="firefly_nights_store.html" target="_blank" rel="noopener noreferrer">Store</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Sweet Stop Candy Shop</a>
                <ul class="dropdown">
                    <li><a href="sweet_stop_candy_shop_about.html" target="_blank" rel="noopener noreferrer">About</a></li>
                    <li><a href="sweet_stop_candy_shop_store.html" target="_blank" rel="noopener noreferrer">Store</a></li>
                </ul>
            </li>
            <li><a href="where_to_find_us.html" target="_blank" rel="noopener noreferrer">Where To Find Us</a></li>
        </ul>
    </nav>
</header>

    <!--I'm not going to write this for every page, but this is where the name that appears between the header and the main_body-->
    <div id="title">
        <h1>Name of Client</h1>
    </div>

    <!--I'm not going to write this for every page, but this is the main segment of the screen where all the text and such goes-->
    <div id="main_body">

            <p> Aliquam in orci eu dui tempor ultricies. Curabitur eu efficitur quam. Etiam eget fringilla quam. Nullam pharetra
            ex ut pharetra posuere. Cras dictum felis quis augue eleifend, eu gravida neque blandit. Curabitur sagittis condimentum
            ante eget scelerisque. Aenean in mattis mauris, iaculis lobortis nunc. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Etiam feugiat suscipit ipsum, tempus finibus justo ultricies consequat. Nullam sed sapien nisl. Praesent 
            aliquet nibh eros. Sed commodo, sapien eu pharetra rhoncus, elit libero volutpat eros, sed elementum ex diam a erat. 
            Nullam vel erat vel quam ultricies tempus. Donec ut aliquet neque. Duis pulvinar efficitur sapien ac congue. Sed feugiat, 
            nisi sit amet aliquet auctor, lectus augue cursus mauris, et ultrices diam orci vitae enim. 
            </p>

    </div>

    <!--I'm not going to write this for every page, but this is the bottom left segment of the screen that brings you to the contact_us page-->
    <footer>
        <div id="questions">
            <h5>Any Questions?</h5>
            <a href="contact_us.html" target="_blank" rel="noopener noreferrer">Contact Us</a>
        </div>
        <div id="socials">
            <h5>Check Out Our Socials!</h5>
            <a href="client's facebook page" target="_blank" rel="noopener noreferrer">Facebook</a>
        </div>
    </footer>
    <!--I'm not going to write this for every page, but this links to the javascript file so that the navbar works-->
    <script src="functions.js"></script>
</body>
</html>

Below is my global stylesheet

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:[email protected]&display=swap');

/*Getting rid of any inherent spacing that a browser may add to a webpage upon creation*/
*{
    padding:0;
    margin:0;
}

/*Setting font of header and making sure the navbar won't wrap when a certain vw is reached*/
header{
    font-family: 'Poppins', monospace;
    white-space: nowrap;
}

/*Making the navbar sorted as a navbar*/
#navbar ul{
    display: flex;
    list-style: none;
    margin: auto;
    background:#9e9b90;
    justify-content: center;
}

#navbar ul li{
    display: inline-block;
    position: relative;
}

#navbar ul li a{
    display: block;
    padding: 20px 25px;
    color: white;
    text-decoration: none;
    text-align: center;
    font-size: 20px;
}

/*setting the navbar's dropdowns to display correctly*/
#navbar ul li ul.dropdown li{
    display:block;
}

#navbar ul li ul.dropdown{
    width: 100%;
    background: #9e9b90;
    position: absolute;
    z-index: 999;
    display: none;
}

#navbar ul li a:hover{
    background: #9e9bab;
}

#navbar ul li:hover ul.dropdown{
    display: block;
}

/*Making the hamburger menu invisible by default until a certain condition is met*/
#hamburger_menu{
    display:none;
    font-size: 30px;
    cursor: pointer;
    padding: 10px;
}

body {
    background: #B2AC88;
}

/*setting font and style for the name that appears under the navbar but above the body on the webpage*/
#title {
    height: 40px;
    text-align: center;
    color: #f7f0f0;
    font-family: "Dancing Script", cursive;
    font-size: 40px;
}

/*the main middle bar of the website*/
#main_body{
    position: absolute;
    top: 190px;
    left: 25%;
    max-width: 50vw;
    width: 100%;
    padding: 20px;
    background-color: #9e9b90;
    border-radius: 25px;
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
}

a:visited, a:link{
    text-decoration: none;
    color: blue;
}

a:hover{
    color:lightblue;
}

#cart_icon{
    height:50px;
}

#cart_button{
    position:sticky;
    justify-self:end;
}

/*the section in the bottom left of the screen*/
footer {
    position: fixed;
    display:grid;
    grid-template-columns: repeat(2, auto);
    column-gap: 50px;
    background-color: #9e9b90;
    text-align: center;
    padding: 20px;
    color: white;
    font-family: 'Poppins', monospace;
    bottom: 0;
    left: 0;
    width: 100%;
}

/*media query that hides the nav bar and shows the hamburger menu when the screen becomes too small*/
@media (max-width: 1050px){
    #navbar ul{
        display: none;
        flex-direction: column;
        position: absolute;
        background-color: #9e9b90;
        width: 100%;
        top: 60px;
        left: 0;
        z-index: 999;
    }

    #hamburger_menu {
        display: block;
        font-size: 30px;
        cursor: pointer;
        padding: 10px;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 1000;
    }

    #navbar ul li{
        display: block;
        text-align:start;
        padding: 10px;
        border-bottom: 1px solid black;
    }

    #navbar ul li ul.dropdown li{
        border-bottom: 1px solid black
    }

    #navbar ul li a{
        padding: 15px;
    }
    
    #navbar ul li ul.dropdown{
        position: static;
        display: none;
        width: 100%;
        background: #9e9b90;
    }

    #navbar ul li:hover ul.dropdown{
        display: block;
    }

    #navbar ul li ul.dropdown li{
        display: block;
        padding-left: 20px;
    }
}

I've tried removing the position being fixed, and I've tried changing it to sticky or relative, but no matter what, I'm running into problems. Help would be greatly appreciated!

I've tried removing the fixed position and changing its aspect and a ton of other things that have been suggested on the internet. I'm just not sure what to do.

Upvotes: 0

Views: 34

Answers (1)

Gento
Gento

Reputation: 1

Seems like this has been already answered here: https://stackoverflow.com/a/45859483/28365102

On top of this you could then use the native js classList property, from where you first grab the element and then add/delete a class on the element as in a style class to hide and show the footer.

More info on it: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Upvotes: 0

Related Questions