要素をページの一部のみの位置固定にする方法

Question

ページをスクロールする必要があるサイドメニューがありますが、その下にはより多くの要素があります。メニューはこれらの要素をスクロールし、これは私が望むものではありません。メニューがその下の要素に当たると、ページのスクロールが止まるはずです。

どうすればいいですか？ jqueryを使用する必要がありますか？または、私はCSSのトリックを使用することはできますか？ここで

Answer 1

は、実用的なソリューションです： https://jsfiddle.net/3w1pvhsx/

jQueryの

$(document).on("scroll",function(){ 
    $("#menu").css("visible","none"); 
    $("#menu").css("position","fixed"); 
    pos = Math.ceil($("#menu").offset().top); 
    pos2 = Math.ceil($("#text2").offset().top); 
    if(pos>pos2){ 
    $("#menu").css("position","relative"); 
    } 
    else{ 
    $("#menu").css("position","fixed"); 
    } 
    $("#menu").show(); 
}); 

CSS

#menu{ 
    float:left; 
    width:50%; 
    position:fixed; 
    height:20px; 
} 
.text{ 
float:left; 
width:50%; 
margin-left:50%; 
} 

HTML がhttps://jsfiddle.net/3w1pvhsx/