How do I stop my fixed sidebar with scrolling on footer

Question

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 1-Jul-20 20:16pm

Sam Vorst

Updated 3-Jul-20 1:26am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Andre Oosthuizen · Answer 1 · 2020-07-01T23:48:00

Solution 1

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.

Posted 1-Jul-20 23:48pm

Andre Oosthuizen

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.

Richard Deeming · Answer 2 · 2020-07-03T01:26:00

Solution 2

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[^]

Posted 3-Jul-20 1:26am

Richard Deeming