Sat. Mar 18th, 2023

[ANSWERED] html – Make sticky div scrolling again

By

Nov 19, 2022 css, html

Solution 1 :

You can add a wrapper div around your sidebar and the thing next to it. This will constrain the stickiness to that particular wrapper. Just make sure the wrapper is above your footer and it should be fine.

Edit: There’s a bit of a margin on your h1 within the footer, I removed it with margin-top: 0; to make the wrapper sit on top of the footer and get properly pushed away.

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background: orange;
}

#sidebar {
    height: 100vh;
    background: white;
    width: 35%;
    position: sticky;
    top: 0px;
    z-index: 999;
    font-family: "Imprima", sans-serif;
    float: left;
}

#work {
    position: relative;
}
.workTemplate {
    height: 110vh;
    width: 65%;
    position: relative;
    left: 35%;
    text-align: center;
}

#work1{
  background: green;
}

.workTemplate img {
    width: 210px;
    position: relative;
    top: 250px;
}

#landingPage {
    width: 100%;
    height: 100vh;
    background: var(--sOrange);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    position: relative;
}

#footer {
    height: 100vh;
    background: blue;
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 999999;
}

#footer h1 { margin-top: 0; }

<html>
<head>
</head>
<body>
<div id="mainContainer">
    <div id="landingPage">
        <div id="landingPageContent">
            <div id="landingPageText">
                <div id="loadText" style="display: block;">
                    
                    <div id="introText">
                        <h2>
                            landing page
                        </h2>
                    </div>
                </div>
            </div>
            <div id="landingPageBg" class="scaleLandingBg shadowLandingBg"></div>
            <div id="landingPageArrow" style="display: block;"></div>
        </div>
    </div>
    <div id="sidebar-wrapper"> <!-- Over here, this is the wrapper -->
        <div id="sidebar">
            <div class="sticky">
                <h2>
                    sidebar
                </h2>
            </div>
        
        </div>
        <div id="work">
            <div id="work1" class="workTemplate">
                <img src="https://uploads-ssl.webflow.com/57c5dd245cc3aa553acf1266/57e0073c437ad7d20b3e04f4_quik_desktop.png" alt="">
            </div>
            <div id="work2" class="workTemplate">
                <img src="https://uploads-ssl.webflow.com/57c5dd245cc3aa553acf1266/57e0073c437ad7d20b3e04f4_quik_desktop.png" alt="">
            </div>
        </div>
    </div>
    
    <div id="footer">
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>

Problem :

My problem can be found here:

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    background: orange;
}

#sidebar {
    height: 100vh;
    background: white;
    width: 35%;
    position: sticky;
    top: 0px;
    z-index: 999;
    font-family: "Imprima", sans-serif;
    float: left;
}

#work {
    position: relative;
}
.workTemplate {
    height: 110vh;
    width: 65%;
    position: relative;
    left: 35%;
    text-align: center;
}

#work1{
  background: green;
}

.workTemplate img {
    width: 210px;
    position: relative;
    top: 250px;
}

#landingPage {
    width: 100%;
    height: 100vh;
    background: var(--sOrange);
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    position: relative;
}

#footer {
    height: 100vh;
    background: blue;
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 999999;
}

<html>
<body>
<div id="mainContainer">
<div id="landingPage" >
                <div id="landingPageContent">
                    <div id="landingPageText">
                        <div id="loadText" style="display: block;">
                            
                            <div id="introText">
                                <h2>
                                  landing page
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div id="landingPageBg" class="scaleLandingBg shadowLandingBg"></div>
                    <div id="landingPageArrow" style="display: block;"></div>
                </div>
            </div>
  <div id="sidebar">
    <div class="sticky">
        <h2>
      sidebar
    </h2>
    </div>

  </div>
  <div id="work">
  <div id="work1" class="workTemplate">
                    <img src="https://uploads-ssl.webflow.com/57c5dd245cc3aa553acf1266/57e0073c437ad7d20b3e04f4_quik_desktop.png" alt="">
                </div>  <div id="work2" class="workTemplate">
                    <img src="https://uploads-ssl.webflow.com/57c5dd245cc3aa553acf1266/57e0073c437ad7d20b3e04f4_quik_desktop.png" alt="">
                </div>
  </div><div id="footer">
                <h1>Footer</h1>
            </div>
</div>
</body>
</html>

As the sidebar scrolls in, you’ll notice it gets sticky. The green and yellow div don’t get sticky but show normal behavior. What I would like is for the sidebar to start scrolling again, as the footer comes in, is this possible without js?
Right now the footer doesn’t ‘push’ the sidebar away but ‘moves over it’, and that’s not what I want.

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022