達成したい動作の特定の名前があるかどうかはわかりません。CSSのスクロールアップ時のレイアウト位置が固定されています（上にスナップ）
GitHubの問題ページ（例：here）では、右の列（ラベル、マイルストーン、譲受人に関する情報付き）は固定位置にありますが、スクロールした場合にのみ表示されます。つまり、最初にスクロールするとstaticのレイアウトがあるようですが、さらにスクロールすると上部にスナップしてfixedレイアウトのように動作します。
もう1つの例は、Google Developer documentationの左と右の列（ナビゲーションと内容）が上記のように動作する方法です。
私の質問があまりにも漠然としていないことを願っていますが、私はCSSでposition: fixed;を認識していますが、上記の目的の効果を達成するためにそれをどのように適応させるかはわかりません。
は、あなたが追加し、jQueryを使ってスクロール上のクラスを削除するか、JavaScriptの私はここにjqueryのを使用しています、これを行うことができます。また、次の例では、フッターに当たったときにサイドバーを停止するクラスを追加しましたが、そのまま続行したい場合は、その部分を削除してサイドバーをスクロールするだけです。ここで
は、アクションでそれを見ることができるので、あなたは自分のテキストエディタにコピーして貼り付けることができますので、私は完全なHTMLページでこれを入れているフィドルFiddle Demo
です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body{padding: 0;margin: 0;color:#fff;}
header{background: blue;height: 100px;text-align: center;}
footer{background: blue;height: 1000px;text-align: center;}
.content-container{position: relative;}
.main-content{margin-left:200px;background: purple;height: 1000px;text-align:center;}
.sidebar{
position:absolute;
top:0;left:0;
background: green;
height: 200px;
width: 200px;
text-align:center;
/*like to add the following to stop from jumpy scrolling in webkit browsers*/
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.sidebar.sidebar-fixed{position:fixed;}
.sidebar.sidebar-stop{position: absolute;bottom:0;top:auto;}
</style>
</head>
<body>
<header>Header</header>
<div class="content-container">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
<footer>Footer</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
var contentTop = $('.content-container').offset().top;
var sidebarHeight = $('.sidebar').height();
var contentBottom = $('footer').offset().top - sidebarHeight;
$(window).scroll(function(){
var scrolltop = $(this).scrollTop();
//starts the fixed sidebar
if(scrolltop >= contentTop){
$('.sidebar').addClass("sidebar-fixed");
}else{
$('.sidebar').removeClass("sidebar-fixed");
}
//stops the fixed sidebar
if(scrolltop >= contentBottom){
$('.sidebar').addClass("sidebar-stop");
}else{
$('.sidebar').removeClass("sidebar-stop");
}
});
</script>
</body>
</html>
あなたの答えをありがとう、しかし、私はそれを自分で実装すると効果がないようです。同様に、HTML、CSS、JSコードを自分のコンピュータ上のファイル（JSFiddleではなく）に置いても、それは効果がありません。私は何かを見逃すことができますか？ –
私が考えることができるのは、jqueryを使用したので、スクリプトの前にjqueryをロードしたかどうかわからないということだけです。私は自分の答えを編集し、フルHTMLマークアップを含んでいますので、コピーして貼り付けるだけで作業を確認できます。 –
更新いただきありがとうございます。残念ながら、私は文字通り就寝しようとしているので、今は試してみることはできませんが、更新したら問題を解決することができます。 –
あなたはこれを試みることができる：
$(window).scroll(function(){
if ($(window).scrollTop() > /* number of pixels from top */){
$("/* sticky div id or class */").css("position", "fixed");
}
});
スクロール位置またはビューポート関連の境界チェックのためのCSSセレクタはありません。この種の効果は、通常javascriptで実現されます。スクリプトソリューションに興味はありますか？ – jayms
@jaymsはい、うれしいでしょう。 –