简体   繁体   中英

Unsticking a div that sticks to the bottom of the screen

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM