How do I add a sticky element to the footer of my website with what I currently have built?

Question

So adding a sticky element seems simple enough but the problem I'm having is adding it to my website. I've done it separate from my website project, however when I try to add code to my existing project is doesn't work.

My current website is smooth-scrolling, single-page. Basically you click on the links and it will smooth-scroll to the corresponding section on my website. When I tried to add sticky elements they just stay to the top or bottom of the page.

What I want: I want the sticky image to be fixed at the top part of the about me section to the left. As you scroll past it I want it to stick to the footer of the view on the left.

Here is the code to my current website without sticky element:

HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Lily+Script+One&display=swap" rel="stylesheet">
    <link href="./resources/css/index.css" type="text/css" rel="stylesheet" />


</head>

<body>
    <nav>
        <!--ordered list inside navigation menu-->
        <ul>
            <!--li = list item a = hyperlink href = link's destination-->
            <li><a href="#home">Home</a></li>
            <li><a href="#aboutme">About Me</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#cv">CV</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>


    <div id="home">
        <h2>This Is The Home Section</h2>
    </div>

    <div id="aboutme">
        <h1>This Is The About Me Section</h1>
    </div>

    <div id="projects">
        <h1>This Is The Projects Section</h1>
    </div>

    <div id="cv">
        <h1>This Is The CV Section</h1>
    </div>

    <div id="contact">
        <h1>This Is The Contact Section</h1>
    </div>


    <script src="https://unpkg.com/smoothscroll-polyfill/dist/smoothscroll.min.js"></script>
    <script src="https://unpkg.com/smoothscroll-anchor-polyfill"></script>
</body>
</html>

CSS:

html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
    margin: 0;
}
body {
    margin: 0;
    font-family: 'Lily Script One', cursive;
}

/*css for the navigation blocks*/
nav {
    text-align: center;
    /*https://www.w3schools.com/css/css_overflow.asp hidden property*/
    overflow: hidden;
    /*https://www.w3schools.com/css/css_positioning.asp position property*/
    top: 0;
    width: 100%;
    height: 10%;

}
/*css for the ordered list of pages*/
ul {
    /*https://www.w3schools.com/css/css_padding.asp padding property*/
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline-block;
    text-align: center;
    /*background-image: url("../Images/test.png");*/
    border-spacing: 60px 10px;
}

/*each list item*/
li {

    display: table-cell;
    position: relative;

}

/*hyperlinks*/
a {
    padding: 20px;
    display: inline-block;
    text-decoration: none;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.15em;
    position:relative;
}

a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

a:hover:after {
    width: 100%;
    left: 0;
}


#home {
    height: 1000px;
    background: #adc0ae;
    /*https://www.w3schools.com/cssref/pr_class_display.asp display*/
    display: inline-block;
    width: 100%;
}

#aboutme {
    height: 1000px;
    background: #a1b7a3;
    display: inline-block;
    width: 100%;
}

#projects {
    height: 1000px;
    background: #95ae97;
    display: inline-block;
    width: 100%;
}

#cv {
    height: 1000px;
    background: #8aa68c;
    display: inline-block;
    width: 100%;
}

#contact {
    height: 1000px;
    background: #7c957e;
    display: inline-block;
    width: 100%;
}

h1{
    margin: 100px;
    text-align:center;
    padding: 0;
}

h2 {
    margin: 100px;
    text-align: center;
    padding: 0;
    font-family: 'Lily Script One', cursive;
}

Any tips or links to good quality tutorials would be appreciated as well. I usually program with c# or python, just now getting into html, css, and javascript.

Answer 1

You can apply position: sticky to that image element but keep in mind sticky elements are relative to their parent.

I suggest you play around with it for a bit longer til you get the hang of it.

How do I add a sticky element to the footer of my website with what I currently have built?

Question

1 answers

solution1
0 2019-07-12 14:05:26

How do I add a sticky element to the footer of my website with what I currently have built?

Question

1 answers

solution1 0 2019-07-12 14:05:26

solution1
0 2019-07-12 14:05:26