window.scroll에서 div를 아래쪽으로 붙일 때의 외형 문제

jQuery에 대해 다소 귀찮은 외관 문제가 있습니다. $ (window) .scroll 이벤트를 사용하여 창의 맨 아래에 div를 붙입니다. 단, 바닥 글에 도달하는 경우를 제외하고 div가 바로 위에 위치합니다. 이것은 기본적으로 질문을 할 때 표시되는 "서식 지정 방법"툴팁에 대해 stackoverflow에 사용 된 것과 비슷한 효과 (다른 방법)를 제공합니다.window.scroll에서 div를 아래쪽으로 붙일 때의 외형 문제

문제는 애니메이션 "좋은"되지 않는 것입니다 : 창을 스크롤은 "흔들어"처럼

사업부가 보인다. 위로 스크롤 할 때
이 문제는 우리가이 경우 사업부의 숙박에 바닥 글에 도달 한 후 동작은
이 발생하지 않는 다른 브라우저보다 파이어 폭스와 악화 될 것으로 보인다
를 아래로 스크롤 할 때보다 강하다 멋지게 그 위에.

다음 코드는 테스트를 위해 복사/붙여 넣기를 할 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 
     <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       function positionToolbar() { 
        var windowTop = $(window).scrollTop(); 
        var windowHeight = $(window).height(); 
        var toolbarHeight = $("#toolbar").height(); 
        var top = windowHeight + windowTop - toolbarHeight; 
        var footerTop = $("#footer").position().top; 
        if ((top + toolbarHeight) >= footerTop) { 
         $("#toolbar").css('top',footerTop - toolbarHeight); 
        } else { 
         $("#toolbar").css('top', windowHeight + windowTop - toolbarHeight); 
        } 
       } 
       positionToolbar(); 
       $(window).scroll(function() { 
        positionToolbar(); 
       }); 
      }); 
     </script> 

     <style type="text/css"> 
      body { margin: 0; padding: 0} 
      #toolbar { width: 100%; height: 50px; background-color: blue; position: absolute } 
      #whatever { height: 2000px; width: 100%; background-color: yellow} 
      #footer { width: 100%; height: 300px; background-color: red } 
     </style> 
    </head> 
    <body> 
     <div id="toolbar"></div> 
     <div id="whatever"></div> 
     <div id="footer"></div> 
    </body> 
</html>

어떤 도움을 주시면 감사하겠습니다. 감사합니다. .

출처

2010-07-02 Max

순수한 CSS가 아닌 이유는 무엇입니까? 점프 등을 없애거나 IE6과 같은 구형 브라우저가 염려 스럽습니까? –

CSS로 원하는 것을 얻을 수 있습니까? 창의 하단에 div를 붙이는 것만을 염두에 두지 마십시오. div가 그 위에 머물러 있어야하는 경우 바닥 글에 도달하는 (즉 스크롤 다운 할 때 창에 들어가는) 상황이 있습니다. – Max

'body'에 100 %의 최소 높이를 지정하고, 바닥 글을 절대적으로 배치하도록 지정하고, DOM 구조에 따라 컨텍스트 래퍼 또는 본문에 아래쪽 패딩을 추가하는 것이 가능합니다. 절대로 배치 된 요소는 가장 가까운 비 정적 부모에 고정됩니다. –

해결책은 기본적으로 고정/하단 0 위치 지정을 사용하는 것입니다. 그런 식으로 창 스크롤에서 위치를 업데이트 할 필요가 없으며 외관상의 문제가 사라집니다.

function positionToolbar() { 
    var windowTop = $(window).scrollTop(); 
    var windowHeight = $(window).height(); 
    var toolbarHeight = $("#toolbar").height(); 
    var top = windowHeight + windowTop - toolbarHeight; 
    var footerTop = $("#footer").position().top; 
    if ((top + toolbarHeight) > footerTop) { 
     $("#toolbar").css('position','absolute').css('top',footerTop - toolbarHeight); 
    } else { 
     $("#toolbar").css('position','fixed').css('top','auto').css('bottom','0'); 
    } 
}

출처

2010-07-19 09:35:39 Max

window.scroll에서 div를 아래쪽으로 붙일 때의 외형 문제

답변

관련 문제