使粘性/固定元素停在页脚

问题描述

我试图使侧栏在用户滚动到页脚后停止.现在，我将z-index设置为-2，以便它位于页脚后面，但突出了一点.

I'm trying to make the side bar stop following the user's scroll once it hits the footer. Right now I set the z-index to -2 so that it goes behind the footer, but it sticks out a tiny bit.

JavaScript

$(document).ready(function () {
    var floatingDiv = $('#side_bar');
    var floatingDivPosition = floatingDiv.position();
    $(window).scroll(function (){
        var scrollBarPosition = $(window).scrollTop();
        if(scrollBarPosition >= floatingDivPosition.top) {
            floatingDiv.css({
                'position': 'fixed',
                'top': 55,
                'width': '18.6676%',
                'z-index': -2
            });
        }
        else{
            floatingDiv.css({
                'position': 'relative',
                'top': 0,
                'width': '79.4392%'
            });
        }
    });
});

HTML

<div id="content">
  <div id="col_1">
    <div id="side_bar">
      <h4 id="cater_to">We cater to</h4>
      <a href="#"><button class="side_bar_btns">Contractor</button></a>
      <a href="#"><button class="side_bar_btns">Wood/Sport Floors</button></a>
      <a href="#"><button class="side_bar_btns">Grocery/Commercial</button></a>
      <a href="#"><button class="side_bar_btns">Education</button></a>
      <h4 id="simplicity">Simplicity</h4>
      <div id="all_systems_side_bar">
        <img src="images/all_systems_logo.png" alt="All Systems Maintenance logo. Links to more about All Systems Maintenance." width="100%">
      </div><!-- all systems side bar -->
    </div><!-- side_bar -->
  </div><!-- col_1 -->

  <div id="col_2">
    //// bunch of stuff here
  </div><!-- col_2 -->

  <div class="clear"></div>
</div><!-- content -->

<footer>
    /// bunch of stuff here
</footer>

CSS

#col_1 {
    float:left;
    margin-top:44px;
    width:23.4994%;
    margin-left:3.9531%;
}

#side_bar {
    background:#003768;
    min-height:665px;
    width:79.4392%;
    border-radius:20px;
    box-shadow: 10px 10px 5px #888;
}

#col_2 {
    float:right;
    margin-top:44px;
    width:68.5944%;
    margin-right:3.9531%;
}

footer {
    background-image:url(../images/foot_background.gif);
    background-repeat:no-repeat;
    background-size:cover;
}

页脚背景与屏幕高度几乎相同(当我用Chrome浏览器检查时约为824px).

The footer background is almost the same height as the screen (about 824px when I inspect it with Chrome).

推荐答案

在YouTube的 https://www.youtube.com/watch?v=5s0L6dCVevk 并稍加更改以提出以下建议，

Found this gem on Youtube at https://www.youtube.com/watch?v=5s0L6dCVevk and changed it slightly to come up with the following, which works.

$(function() {
   if ($('#side_bar').length) {
      var el = $('#side_bar');
      var stickyTop = $('#side_bar').offset().top;
      var stickyHeight = $('#side_bar').height();

      $(window).scroll(function(){
        var limit = $('footer').offset().top - stickyHeight - 20;

        var windowTop = $(window).scrollTop();

        if (stickyTop < windowTop) {
            el.css({
                position: 'fixed',
                top: 55,
                width: '18.6676%'
            });
        } else {
            el.css({
                position: 'static',
                width: '79.4392%'
            });
        }

        if (limit < windowTop) {
            var diff = limit - windowTop;
            el.css({
                top: diff
            });
        }
    });
}
});

这篇关于使粘性/固定元素停在页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！