Question

因此添加粘性元素似乎很简单，但是我遇到的问题是将其添加到我的网站。我已经完成了它与我的网站项目的分离，但是当我尝试向现有项目中添加代码时不起作用。

我当前的网站是平滑滚动的单页网站。基本上，您单击链接，它将平滑滚动到我网站上的相应部分。当我尝试添加粘性元素时，它们只是停留在页面的顶部或底部。

我想要的是：我希望将粘性图像固定在“关于我”部分左侧的顶部。当您滚动通过它时，我希望它贴在左侧视图的页脚上。

这是我当前网站上没有粘性元素的代码：

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;
}

任何技巧或高质量教程的链接也将不胜感激。我通常使用c＃或python进行编程，只是现在进入html，css和javascript。

Answer 1

您可以将position: sticky应用于该图像元素，但请注意，粘性元素是相对于其父元素的。

我建议您play around使用它一段时间，直到您掌握它为止。

如何使用当前构建的内容向网站的页脚添加粘性元素？

1 个答案: