javascript - 取消粘附在屏幕底部的 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;
}