取消粘贴在屏幕底部的div

Question

Currently my sidebar, which is longer than the browser window, sticks to the bottom of the screen. I need it to stop sticking to the bottom of the screen when the footer appears, so it doesn't cover the footer.

I also want to make my header stick to the top of the screen, but not have the sidebar cover it. It should be noted that I have tried using the hcsticky plugin for jQuery, but I can't get it to work at all.

$(window).load(function(){ 

var $sidebar = $("#sidebar"),
$thefoot = $("#thefoot"),
$window = $(window),
offset = $sidebar.offset(),
sbBottom = Math.abs($window.height() - (offset.top + $sidebar.height())),
prevScrollTop = 0;

$window.scroll(function() {

if (prevScrollTop < $window.scrollTop()) {
    $sidebar.removeClass('fixedTop');
    if ($window.scrollTop() > (sbBottom + 12)) {
        $sidebar.addClass('fixedBtm');
    } else {
        $sidebar.removeClass('fixedBtm');
    }
} else {

    $sidebar.removeClass('fixedBtm');
    if ($window.scrollTop() > sbBottom) {
        $sidebar.addClass('fixedTop');
    } else {
        $sidebar.removeClass('fixedTop');
    }

} });

});

#sidebar {
    width: 300px;
    margin-bottom: 10px;
    overflow: hidden;
    margin: 0 auto;
    float: left;
    clear: right;
}

.fixedBtm {
    margin-left: 660px !important;
    position: fixed;
    bottom: 0;
}

.fixedTop {
    margin-left: 660px !important;
    position: fixed;
    bottom: 0;
}

.footBtm {
    bottom: 350px;
}

#thefoot {
    background-color: #5774F2;
    clear: both;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/footer.png");
    height: 340px;
    width: 100%;
}

Answer 1

I do not see the CSS, basically here is what are looking for based on the code you have presented.

In CSS file, add these properties to the appropriate classes in addition to other properties you might have.

/*for header element*/
.header{
  position:fixed;
  display: block;
  clear: both;
}

/*for footer element*/
.footer{
  display: block;
  clear: both;
}

/* for sidebar element*/
.sidebar{
  float:left;
}