Question

我知道div的定位（固定，绝对和相对）。我可以将一个固定的div附加到身体上，以便在滚动身体时它会粘到相同的位置。我在这里问一个不同的问题。

我有一个高度超过视口高度的侧边栏，我希望它固定在身体上。滚动身体时，它也应该滚动，但一旦固定div的底部可见，它就不应该与身体一起滚动。

例如，Facebook墙的右侧边栏与身体一起滚动，一旦右侧边栏的底部可见（固定），就会停止与身体一起滚动。

Answer 1

这可以通过将侧边栏置于绝对位置并在窗口滚动位置通过底部后立即将其更改为固定。

CSS：

#sidebar {
    height: 120%;
    width: 100px;
    border: 2px solid blue;
    padding: 20px;
    margin: 20px;
    position: absolute;
    top: 0;
}

jQuery：

$(document).ready(function() {
    var bottomPos = $('#sidebar').outerHeight(true) - $(window).height();
    $(window).scroll( function() {
        if ( $(window).scrollTop() > bottomPos ) {
            $('#sidebar').css({'position':'fixed','top':'auto','bottom':'0px'});
        } else {
            $('#sidebar').css({'position':'absolute','top':'0px'});
        }
    });
});

a demo。

Answer 2

这里有三个关于预期任务的教程（google with query的第一个结果：“滚动固定边栏”）

http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

http://css-tricks.com/scrollfollow-sidebar/

以下是其中一种方法的代码：

CSS

#page-wrap { 
  width: 600px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 190px; 
  position: fixed; 
  margin-left: 410px; 
}

的jQuery

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});

Answer 3

以侧边栏为例，似乎只要浏览器垂直滚动到某个阈值（屏幕顶部点击侧栏中最终广告的顶部），它就会更改侧栏上的类。 / p>

此时它将css位置设置为fixed并在侧边栏上设置 - ??? px的顶部样式，以便它在该阈值处显示未移动但是当您向下滚动时它将不再滚动。

您可以使用jquery scrollTop（）函数检测特定元素的偏移量。 http://api.jquery.com/scrollTop/

Answer 4

使用绝对位置（在固定位置，我们必须隐藏滚动并设置scrollTop而不是顶部）：

$(document).scroll( function() {
    var offset = $(this).scrollTop() + $(window).height() - $('#sidebar').outerHeight();
    $('#sidebar').css('top', Math.max(0, offset));
});

* {
    margin: 0;
    padding: 0;
}

#content {
    height: 2000px;
    padding-right: 40%;
    background: red;
}

#sidebar {
    height: 1000px;
    position: absolute;
    width: 40%;
    top: 0; right: 0;
    background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="content"></div>
<div id="sidebar"></div>

fiddle

Answer 5

可以通过针对容器的高度测试scrollTop（）来完成。

＆＃13;

var $sidebar   = $("#sidebar"),
      $window    = $(window),
      offset     = $sidebar.offset(),
      topPadding = 50,
      calc= 0,
      max = 0;

$window.scroll(function() {
    calc = $window.scrollTop() + $sidebar.height() + offset.top;
    if(calc > $('#main').height()) {
          max = $('#main').height() - $sidebar.height();
          $sidebar.stop().css('marginTop', max);
    } else if ($window.scrollTop() > offset.top) {
      $sidebar.stop().animate({
        marginTop: $window.scrollTop() - offset.top
      });
    } else {
      $sidebar.stop().animate({
        marginTop: 0 
      });
    }
});

＆＃13;

#wrapper {
    width: 100%;
}

#main, #more {
    width:70%;
    background-color: black;
    color:white;
    height: 900px;
    float:left;
}

#more {
    background-color: red;
}
p {
    margin-top:50%;
}
#sidebar {
    width:30%;
    background-color: blue;
    color:white;
    height: 500px;
    float:left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="main">
        <p>Main Content</p>
    </div>
    <div id="sidebar">
        <p>Sidebar</p>
    </div>
    <div id="more">
        <p>More Content</p>
    </div>
</div>

＆＃13;

如何将高度固定的div高于视口到身体

5 个答案: