如何將固定高度的視高度貼到身體上

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>