Question

此代码来自waypointarts.com，它假设在滚动时创建一个侧边栏，直到底部。问题是当右div填充左div的高度，即使设置为100＃保持固定到某个高度，窗口/屏幕或其他东西。如何将其设置为100％高度或相当于右div的高度。

HTML 头

<div id="wrapper">

  <div id="left">

    <div id="sidebar">

      Sidebar Content

    </div>

  </div>

  <div id="right">

    This is the text of the main part of the page.

  </div>

  <div class="clear"></div>

</div>

<div id="footer">Footer</div>

CSS

#header {
  background: #c2c2c2;
  height: 50px
}

#wrapper {
  width: 500px
}

#left {
  background: #d7d7d7;
  position: absolute; /* IMPORTANT! */
  width: 150px;
  height: 100%
}

#right {
  position: relative;
  width: 350px;
  float: right
}

#sidebar {
  background: #0096d7;
  width: 150px;
  color: #fff
}

.clear {
  clear: both
}

#footer {
  background: #c2c2c2
}

JAVASCRIPT

$(document).ready(function () {

    var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top;

    $(window).scroll(function () {

        var scroll = $(this).scrollTop();
        var height = $('#sidebar').height() + 'px';

        if (scroll < $('#left').offset().top) {

            $('#sidebar').css({
                'position': 'absolute',
                'top': '0'
            });

        } else if (scroll > length) {

            $('#sidebar').css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });

        } else {

            $('#sidebar').css({
                'position': 'fixed',
                'top': '0',
                'height': height
            });
        }
    });
});

来自waypoitsarts.com的图片：

Image from waypoitsarts.com

Answer 1

我认为你的脚本工作正常，可能是你的CSS问题。要正确包含 position:absolute;元素，您应将其父元素（'#wrapper'）设置为position:relative。

请参阅此jsfiddle上的演示：jsfiddle.net/J62Cp/

Answer 2

我有类似的设置。我需要一个＆＃34;粘性＆＃34;从内容部分顶部开始的div（页面顶部下方300px，由于标题），在我向下滚动时被修复，但在我到达某个点（页脚）时停止了。使用纯CSS，在我到达底部之后，粘性div在我的页脚后面。您的代码让我朝着正确的方向前进，但这是我为用例所做的更改：

$(document).ready(function () {
    var length = $("#left").height() - $("#sidebar").height();

    $(window).scroll(function () {
        var scroll = $(this).scrollTop();
        var height = $('#sidebar').height() + 'px';

        if(scroll <= 0) {
            $("#sidebar").css({
                'position': 'absolute',
                'top': '0'
            });
        } else if(scroll >= length) {
            $("#sidebar").css({
                'position': 'absolute',
                'bottom': '0',
                'top': 'auto'
            });
        } else {
            $("#sidebar").css({
                'position': 'fixed',
                'top': '300px'
            });
        }
    });
});

Answer 3

你想要固定定位侧边栏或侧边栏高度=主要内容部分???? 如果您希望侧边栏的高度等于主要内容部分，那么这可能对您有帮助..

$(function(){
   var mainHeight = $('.right').height();
      $('.left').css({
         'height':mainHeight
      });
});

jquery在滚动时固定侧栏，直到底部

3 个答案: