바닥 글 태그가 감지되면 아래쪽에 떠있는 div를 제거하는 방법은 무엇입니까?

Question

내 페이지에 효과를 생성하고 있습니다. 뉴스 페이지가 있는데 사용자가 페이지를 스크롤하면 화면 하단에있는 버튼이있는 부동 div가 표시됩니다. 화면 하단에 붙어 있어야합니다. 그러나 그것이 바닥 글 내용에 도달하지 않을 때까지 붙어있을 것입니다. 나는 이것을 어떻게하는지 모른다. 이걸로 나를 도울 수 있니? 여기

$(window).scroll(function() { 
    if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     $(".floating_content").removeAttr('style'); 
     //$(".fix_content").css('margin-bottom':'174px'); 
    } else { 
     $(".floating_content").css({'position':'fixed','bottom':'0','width':'100%','z-index':'99'}); 
    } 
}); 

내 바이올린입니다 :

HTML :

<header>Header Goes Here</header> 
<div class="container"> 
    <div class="news"> 
     <p>Very long content here...</p> 
    </div> 
</div> 
<div class="floating_content"> 
    <button>Next Page</button> 
</div> 
<footer>Footer Here</footer> 

CSS :

header { 
    height: 50px; 
    background: #ccc; 
    color: #fff; 
    text-transform: uppercase; 
    padding: 5px; 
    font-family: verdana; 
    text-align: center; 
} 

.news { padding: 10px } 

.floating_content { 
    display: none; 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    padding: 5px; 
    text-align: center; 
    background: #ccc; 
} 
footer { 
    background: #000; 
    color: #fff; 
    text-align: center; 
    height: 50px 
} 

JQuery와 여기

내 코드의 비트의 JSFiddle

Answer 1

업데이트 :

$(window).scroll(function() { 
     if($(window).scrollTop() + $(window).height() == $(document).height()) { 
     $(".floating_content").show(); 
    } 
}); 

UPDATED2 : 내가 설정하고 같이 relative로 부동 내용의 위치를 ​​변경하기 위해 노력하고있어

:

.floating_content { 
    display: none; 
    position:relative; //here 
    bottom: 0; 
    width: 100%; 
    padding: 5px; 
    text-align: center; 
    background: #ccc; 
} 

는 here

Jsfiddle 업데이트