動的に別のHTML要素にスクロールされたときに固定DIVにCSSクラスを追加

Question

StackOverflowでいくつかの同様の質問を読んでいます。

hss要素にCSSクラスを動的に追加し、別のhtml要素を超えてページをスクロールして、ユーザーがページをスクロールアップしたときにクラスを削除したいとします。

具体的に、私は位置変更する：有効DIV要素はが画面の底部とスティックにを固定され停止するように、それはフッターDIVの上部に到達したとき、絶対：位置にDIV要素の固定をフッターdivの上部に表示されるので、ユーザーはページの残りの部分をスクロールし続けます。

私はいくつかのJavaScriptコードスニペットを適応させようとしましたが、私が望む正確な方法では動作しませんでした。ここに私の最高の試みである：

$(function() { 
    var menu = $('#fixedbtn'); 
$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

if (scroll >= $('#footer-1').offset().top) { // check the offset top 
    menu.addClass('fixedPosition'); 
} else { // check the scrollHeight 
    menu.removeClass('fixedPosition'); 
} 
}); 
}); 

私はそれが＃フッター-1のdivの上部を過ぎてスクロールされたとき#fixedbtn divのにクラス「fixedPosition」を追加し、またとき、クラスを削除したいですユーザーがスクロールして戻ってくるので、＃footer-1がビューポートのボトムから戻ってきます。

この場合、ページトップから固定ピクセル距離を使用しても機能しません。 <＃footer-1> divの上部がユーザーの画面下部に表示されたときにdivにクラスを追加するイベントトリガーが必要です。

仲間のコード詩人が、希望の結果を得るための正しい解決方法を教えてくれませんか？

Answer 1

ホープこれは

$(function() { 
var menu = $('#fixedbtn'); 
function isInViewport($this) { 
    var elementTop = $this.offset().top; 
    var elementBottom = elementTop + $this.outerHeight(); 
    var viewportTop = $(window).scrollTop(); 
    var viewportBottom = viewportTop + $(window).height(); 
    if(elementTop < viewportBottom ==true){ 
     menu.addClass('fixedPosition'); 
    }else { 
     menu.removeClass('fixedPosition'); 
    } 
} 
$(window).scroll(function() { 
isInViewport($('#footer-1')) 
}); 
}); 

$(function() { 
 
var menu = $('#fixedbtn'); 
 
function isInViewport($this) { 
 
\t var elementTop = $this.offset().top; 
 
\t var elementBottom = elementTop + $this.outerHeight(); 
 
\t var viewportTop = $(window).scrollTop(); 
 
\t var viewportBottom = viewportTop + $(window).height(); 
 
\t if(elementTop < viewportBottom ==true){ 
 
\t \t menu.addClass('fixedPosition'); 
 
\t }else { 
 
\t \t menu.removeClass('fixedPosition'); 
 
\t } 
 
} 
 
$(window).scroll(function() { 
 
isInViewport($('#footer-1')) 
 
}); 
 
});

.conatiner{ 
 
height:2000px; 
 
} 
 
#footer-1{ 
 
background-color:red; 
 
position:relative; 
 
} 
 
#fixedbtn{ 
 
background-color: blue; 
 
width: 55px; 
 
height: 20px; 
 
position: fixed; 
 
left: 0; 
 
bottom: 0; 
 
} 
 
#fixedbtn.fixedPosition{ 
 
background-color: white; 
 
position:absolute; 
 
left:0; 
 
top:0; 
 
} 
 
.stuck{ 
 
height:800px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="conatiner"> 
 
<div class="stuck"> 
 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
 
</div> 
 

 
<div id="footer-1"> 
 
<div id="fixedbtn"> 
 
fixedbtn 
 
</div> 
 
#footer-1 
 
</div> 
 
</div>