jQuery는 화면 하단에 div를 유지합니다

이 안내서는 jQuery를 사용하여 화면의 상단 또는 하단에 DIV를 고정시키는 방법을 설명하며 표준 CSS 솔루션이 부족한 상황을 해결하는 방법을 설명합니다. CSS는 기본 포지셔닝을 제공하지만 jQuery는 스크롤 중에도 DIV 위치를 유지하기위한 강력한 솔루션을 제공합니다.

CSS 및 jQuery 솔루션

인터넷 익스플로러 호환을위한 jQuery 폴백과 함께 CSS 접근법이 있습니다.

해당 jQuery 코드 : 고급 기술 및 faqs

jQuery 플러그인은 스크롤 중에 사이드 바 요소 가시성을 유지할 수도 있습니다. 몇 가지 일반적인 질문을 다루겠습니다.

Q : jQuery를 사용하여 스크롤하는 동안 화면 하단에 div를 유지하는 방법?

.bottom {
  position: fixed; /* Preferred method */
  position: absolute; /* IE fallback */
  right: 0;
  bottom: 0;
  padding: 0;
  margin: 0;
}

/* IE-specific fix */
.fixie {
  left: expression((-jsrp_related.offsetWidth + (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');
  top: expression((-jsrp_related.offsetHeight + (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px');
}

CSS에서

를 사용하십시오. 예를 들면 :

// Note:  A height property MUST be set for this to work correctly.
if ($.browser.msie) {
  div.css({ position: "absolute", width: jslide_width, right: 0, height: 100 });
  div.addClass('fixie');
} else {
  div.css({ position: "fixed", width: jslide_width, right: 0, height: 100 });
}

DIV의 ID로 를 교체하십시오 Q : jQuery로 div의 하단 위치를 찾는 방법?

결합

및 : Q : 왜 스크롤에서 업데이트하지 않는 이유는 무엇입니까?

position: fixed

가장 가까운 위치 조상에 대한 위치. 하나가 없으면 문서 본문과 페이지와 함께 스크롤을 사용합니다. 화면 고정 위치에

$("#yourDiv").css("position", "fixed");
$("#yourDiv").css("bottom", "0");

를 사용하십시오

Q : jQuery를 사용하여 뷰포트에 비해 DIV의 하단 위치를 얻는 방법? #yourDiv

Q : jQuery를 사용하여 다른 div의 바닥에 div 스틱을 만드는 방법?

메소드를 사용하십시오 :

이 향상된 가이드는 더 나은 가독성을 위해 명확한 설명과 개선 된 코드 형식을 제공합니다.

위 내용은 jQuery는 화면 하단에 div를 유지합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!