Click here to Skip to main content
15,042,088 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all,

I have a question, I have an sticky sidebar.. I want to let this stop if reaches the footer. Does somebody know how to do this?? I know you can do it with javascript, but I'm not very good at it.

Here is my html and css:
HTML:
<pre lang="HTML"><pre>      <div class="sticky-sidebar">
        <h1><small>Day #15</small> Sticky Sidebar <small>Final Version</small></h1>

        <div class="sandbox">
          <h2>Sandbox <small>This is where you play</small></h2>
          <div class="content">

            <a href="student.html" class="button-theme"><small>Click here to</small>View the student version</a><br>
            <a href="index.html" class="button-theme"><small>Click here to</small>View the info page</a>

            <h3>Lots of filler text to make the page long.</h3>
            <p></p>
            <p></p>
            <p></p>

          </div>
        </div>

        <div class="sticky-sidebar1">
          <h4>Sticky sidebar!</h4>
          <p>Scroll down to see.</p>
        </div>
      </div>

CSS:
CSS
.sticky-sidebar {
  width: 80%;
  margin: 0 auto;
			margin-bottom: 600px;
}

.sticky-sidebar::after {
  display: table;
  content: "";
  clear: both;
}

.sticky-sidebar .sandbox {
  width: 60%;
  margin: 0 0 40px;
  float: left;
}

.sticky-sidebar1 {
  background: #fff;
  padding: 40px 40px 60px;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 20px 20px 0 rgba(0,0,0,.05);
  position: fixed;
  right: 5%;
  width: 36%;
  float: right;
}


Thanks, Sam

What I have tried:

I tried to search the internet for solutions, I can find some but I don't know how to implement this code in mine because I don't know much of javascript.
Posted
Updated 3-Jul-20 1:26am

This is what you are looking for - Make sidebar sticky with scroll with a working fiddle HERE

You might need to changes the odd code but should suffice for your question.
   
Comments
Sam Vorst 2-Jul-20 7:10am
   
Thanks, I found this. But don't know how to use it with my own classes etc.
Andre Oosthuizen 2-Jul-20 7:23am
   
Looking at the fiddle example, what part is it that you do not understand?
Sam Vorst 2-Jul-20 13:02pm
   
Well, I have implemented the code but the #sticky-anchor is not explained so it won't work.
There doesn't seem to be a footer in your question. Assuming it's outside of the sticky-sidebar element, CSS "sticky" positioning should just work.
CSS
.sticky-sidebar1 {
    ...
    position: sticky;
    top: 0;
    ...
}
position - CSS: Cascading Style Sheets | MDN[^]
Demo[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900