Image after Nav List that is using affix in Bootstrap - html

Question

I am trying to affix an image to the bottom of a nav list and have it stay there when the page scrolls.
This is what I am wanting:
This is what I am getting when the affix kicks in:
I need it to stay just like picture one. I have tried googling the problem and searching stack overflow with no results.
Here is the code:
<!--SIDEBAR NAVIGATION -->
<ul class="nav nav-list well hidden-phone hidden-tablet" data-spy="affix" data-offset-top="850">
<li class="nav-header">The Green Panda</li>
<li class="divider"></li>
<li>What We Do</li>
<li class="divider"></li>
<li>Our Solutions</li>
<li class="divider"></li>
<li>More Than Web Design</li>
<li class="divider"></li>
<li>Contacting Us</li>
</ul>
<img src="img/woody-effect.png" class="img-bottom nav-list" data-spy="affix" data-offset-top="850">

Answer 1

EDIT:
The selector was incorrect.
If the height of your menu is static, you can add a class to that image when it switches over to the fixed styling and apply this css:
top: 310px;
That will position it at the bottom of your menu.
I would set up a class underneath .affix and have it applied to your image (add the id panda_logo)
#panda_logo.affix {
top: 310px
}