javascript - 取消粘贴在屏幕底部的div

目前，我的侧边栏比浏览器窗口长，它固定在屏幕底部。当页脚出现时，我需要它停止粘附在屏幕底部，因此它不会覆盖页脚。

我还想使标题保持在屏幕顶部，但没有侧边栏覆盖它。应该注意的是，我已经尝试过将hcsticky插件用于jQuery，但是我根本无法使用它。

$(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%;
}

最佳答案

我没有看到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;
}

关于javascript - 取消粘贴在屏幕底部的div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22237169/