粘性侧边栏和页脚不起作用

Question

I am trying to make my side navigation bar sticky so that when you scroll the page content, the sidebar will remain visible (and scrollable) and not scroll with the page content.

I am also trying to make my footer sticky only when the page content is smaller then the screen size, otherwise it only pops up after the page content has ended. (Like this example: https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ )

I am a novice web developer trying to make a website for a friend as a project. I am trying to keep the site responsive so that it works well on mobiles and different computer resolutions.

I am using Bootstrap 4.0.0-beta3, font-awesome 4.7.0 and javascript.

UPDATE : I tried to use flexboxes to make the footer sticky, but it didn't work.

.wrapper {
    display: flex;
    align-items: stretch;
}

I have placed a copy of most of my code here because it seamed a little big to write out all in this post.: https://jsbin.com/xabisiq/edit?html,css,js,output

Thank you in advance!

Answer 1

Ok let's go step by step.

Side bar sticky with position fixed

When you give something position:fixed you have to understand you are taking the element out of the flow of the normal flow. It will no longer render in its assigned position. In the case of fixed , it will not move when scrolled and will be on top of other elements. Kind of like if you took your computer monitor and stuck a yellow sticky note on a corner of it, literally. All the elements in your monitor render, and move, your sticky note stays there forever, on top of everyone. So how do you manage to view the elements behind it? Well, you have to give them CSS rules to force them to take into account that space of the fixed element, because on their own they can't see that element any more. I hope that wasn't too confusing.

HTML

Move your sidebar HTML out of that parent div container #main-Body-Head

<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">...</nav>
<nav id="sidebar">...</nav>
<div class="container" id="main-Body-Head">...</div>

Give appropriate rules:

#sidebar {
 position: fixed;
 left: 0;
 top: 61px; //size of top nav
}

See how I had to hard-code the top part? That's because sidebar doesn`t know nor care about the top nav element, you have to tell it to give it some space or you won't be able to view that element.

Now you have to tell the main content of your page to move over and make space for the sidebar with:

.wrapper {
    padding-left: 250px; //size of #sidebar
}

Snapshot

Footer with sticky via flex

For this case I simply added the CSS rules available in that wonderful link. Excellent post really!

body{
   display: flex;
   min-height: 100vh;
   flex-direction: column;
}

#main-Body-Head { flex:1;  }

Snapshot

That's it really.

Problems?

Well, the fact that as you scroll down you'll see that your side bar will scroll over your footer. That will need to be fixed. Also when you git the arrow and your sidebar moves to the right, you need to adjust the body's padding accordingly. Hope this helped!

I recommend the best book I ever read on CSS: CSS mastery by Andy Budd.