Question

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

我还想让我的标题贴在屏幕顶部，但没有侧栏覆盖它。应该注意的是，我已经尝试过使用jcsticky插件来实现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%;
}

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;
}

取消粘在屏幕底部的div

1 个答案: