フッターに到達すると固定位置のdivが停止する

Question

私はサイドメニュー(.link-panel)を持っています。内部.link-panelは.link-panelの内容を保持する(.cover)です。 .coverは固定されたdivなので、ユーザーがスクロールするとリンクが動くようになります。私が直面している唯一の問題は、一番下にフッターがあり、cover divがスクロールするたびに.footerの上に来ることです。フッタに達すると.coverが停止するようにしています。そうすれば.footerと.coverは重複しません。私はこれを解決するためにいくつかのjQueryを使ってみましたが、私のテクニックはうまくいきません。それは非常に奇妙な結果を生み出しています。場合によっては、リンクの一部がウィンドウの上にあり、表示されない場合があります。.footerにスクロールすると、スクロールしたときに.link-panelが再び表示されません。あなたは私が作成したhere with the jsFiddleを見て実験することができます。

HTML

<div class="container"> 

    <div class='control_panel'> 
    <div class='control_title'> 
     <h2>Your Settings</h2> 
    </div> 

    <div class='control_settings'> 

    </div> 
    </div> 

    <div class="link-panel"> 
    <div class="cover"> 


    <ul> 


     <li> Dashboard</li> 
     <hr> 
     <li> Blog</li> 
     <hr> 
     <li><span><b>|</b> Settings</span></li> 
     <hr> 
     <li> Contact Us</li> 


    </ul> 
     </div> 
    </div> 
    <!--End of link panel div--> 
</div> 

<div class='footer'> 

</div> 

CSS

.container { 
    display: block; 
    margin: 0px auto; 
    width: 100%; 
    padding-left: 30%; 
    box-sizing: border-box; 
    position: relative; 
} 

.footer { 
    display: block; 
    width: 100%; 
    height: 500px; 
    background-color: black; 
    margin-top: 0px; 
} 

html, 
body { 
    position: relative; 
    height: 100%; 
    background-color: #f2f2f2; 
} 

.control_panel { 
    position: relative; 
    display: inline-block; 
    width: 60%; 
    margin-left: 0px; 
} 

.control_title { 
    display: block; 
    background-color: white; 
    height: 100px; 
    margin-bottom: 30px; 
} 

.control_settings { 
    display: block; 
    background-color: white; 
    height: 900px; 
    width: 900px; 
} 

.link-panel { 
    position: absolute; 
    float: left; 
    width: 30%; 
    height: 100%; 
    background-color: #333333; 
    left: 0; 
    top: 0; 
} 

.cover{ 
    position: fixed; 
} 
.link-panel ul { 
    list-style-type: none; 
    font-size: 19px; 
    margin-top: 35px; 
} 

.link-panel li { 
    margin-top: 15px; 
} 

jQueryの

私はそれはとなるようにするにはどうすればよい

function checkOffset() { 
    var a=$(document).scrollTop()+window.innerHeight; 
    var b=$('.footer').offset().top; 
    if (a<b) { 
    $('.cover').css('bottom', '-14'); 
    } else { 
    $('.cover').css('bottom', (-14+(a-b))+'px'); 
    } 
} 
$(document).ready(checkOffset); 
$(document).scroll(checkOffset); 

ユーザーがスクロールするとが上下に移動しますが、.footerに達した時点で停止しますが、ユーザーが再びスクロールすると、.cover？

Answer 1

編集：うまくいけば今でもChromeでも動作します。

私はあなたのケースのためにバイオリンを作りました：それはあなたのために働く場合https://jsfiddle.net/g8ctha2o/5/

を教えてください。

基本的には、メニューの下端のフッタの上端よりも小さい位置の値をスクロールイベントで確認することです。これがもはや真でないと、スクロールのしきい値に達し、jQueryを使用して位置を固定から絶対に変更します。

var menuBottom, 
    footerTop = $('.footer').offset().top, 
    positionChanged = false, 
    scrollThreshold; 

$('.scrollable').on('scroll', function() { 
    menuBottom = $('.scrollable').scrollTop() + $('.menu').offset().top + $('.menu').outerHeight(); 
    if (!positionChanged) { 
    if (menuBottom + 5 >= footerTop) { 
     scrollThreshold = $('.scrollable').scrollTop(); 
     $('.menu').css({ 
     visibility: 'hidden', 
     position: 'absolute', 
     top: menuBottom - $('.menu').outerHeight() - 5, 
     right: 35, 
     visibility: 'visible' 
     }); 
     positionChanged = true; 
    } 
    } else { 
    if (scrollThreshold > $('.scrollable').scrollTop()) { 
     $('.menu').css({ 
     position: 'fixed', 
     top: 450, 
     right: 60 
     }); 
     positionChanged = false; 
    } 
    } 
});