解除粘贴到屏幕底部的div

Question

当前我的侧边栏比浏览器窗口更长，它会粘贴到屏幕的底部。当页脚出现时，我需要它停止粘贴到屏幕的底部，所以它不会覆盖页脚。

我也想让我的标头贴到屏幕的顶部，但没有侧栏覆盖它。应该注意的是，我已经尝试过使用jQuery的hcsticky插件，但是我根本无法完成它。

$(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

我没有看到CSS，基本上这里是基于您提供的代码所寻找的。

在CSS文件中，除了可能具有的其他属性之外，还可以将这些属性添加到适当的类中。

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

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

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