div 안에있는 패널

나는 머리글, 본문 및 바닥 글이있는 페이지가 있습니다. 페이지가 스크롤 될 때 뜨는 페이지 하단에 채팅 패널이 표시됩니다.div 안에있는 패널

position:fixed; bottom:0px;을 사용했지만 채팅 패널이 페이지 바닥 글과 겹칩니다.

어떻게하면 바닥 글이 겹치지 않게 할 수 있습니까? 본문의 div에 패널을 넣으려고했지만 작동하지 않았습니다. 예상되는 동작의

<html> 
<body> 
    <div id="body"> 
    <div> 
     Body content... 
    </div> 
    <div style="position:fixed;bottom:0px;right:100px;border:solid 1px black;background-color:orange;"> 
     This is the chat panel 
    </div> 
    </div> 
    <div id="footer" style="background-color: gray;">This is the footer</div> 
</body> 
</html>

그리고 여기에 두 개의 스크린 샷 : 여기

몇 가지 예제 코드입니다 중반 페이지 midpage

을 속과 바닥 bottom

출처

2014-11-11 algiogia

공유 일부 코드 ... 당신이 패널이 바로 바닥 글 위에 떠하려는 또는 배치 싶은가하십시오 패널 뒤에있는 푸터? –

@ThomasBormans 채팅 패널에 바닥 글이 표시되어서는 안됩니다. 페이지 코드의 단순화 된 버전으로 질문을 편집했습니다. – algiogia

에 도달 할 때 작동합니다 당신이 원하는 것을하십시오. 바닥에 도달 할 때 바닥 글과 함께 원활하게 스크롤 할 수 있도록 최적화 할 수 있습니다.

http://jsfiddle.net/4cgyjpqt/3/

CSS :

body, html { 
    margin: 0; 
    padding: 0; 
} 
#footer { 
    width: 100%; 
    background-color: gray; 
    height: 40px; 
} 
.panel { 
    position:fixed; 
    bottom:20px; 
    right:100px; 
    border:solid 1px black; 
    background-color:orange; 
}

jQuery를 :

$(function() { 
    var $win = $(window); 

    $win.scroll(function() { 
     if ($win.height() + $win.scrollTop() == $(document).height()) { 
      // When the user is at the bottom of the page, get the footer height 
      var footer = $('#footer').height(); 
      // set footer height as number of px from bottom 
      $('.panel').css('bottom', footer); 
     } else { 
      // When the user is not at the bottom, set bottom back to 0px 
      $('.panel').css('bottom', '0px'); 
     } 
    }); 
});

출처

2014-11-11 11:59:45

Udit에 답장 했으므로 채팅 패널은 바닥 글에 도달하지 않는 한 페이지 하단에 맞아야합니다. – algiogia

@algiogia 내 대답이 바뀌 었습니다. 이것은 트릭을해야합니다. –

그 트릭을 않습니다,하지만 거기에 "div"내부에 떠있는 채팅 div 방법이 아닌가요? 내가 묻는 이유는 바닥 글이 확장 될 수 있기 때문입니다 (높이가 고정되어 있지 않습니다). – algiogia

div 안에있는 패널

답변

관련 문제