如何将固定高度的视高度贴到身体上

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

在这里，你有预期的任务三个教程（第一个成果出来与查询谷歌的： “上滚动固定侧边栏”）

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

以Facebook的侧边栏，因为它似乎是只要浏览器垂直滚动到一定的阈值（在屏幕的顶部命中最后的广告顶部的一个例子侧边栏）它改变了侧边栏上的课程。

此时它将css位置设置为固定并在侧边栏上设置顶部样式 - ??? 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（）来完成。

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

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

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