jQuery Keep Div on Bottom of Screen

This guide explains how to keep a div fixed at the top or bottom of the screen using jQuery, addressing situations where standard CSS solutions fall short. While CSS offers basic positioning, jQuery provides a robust solution for maintaining div position even during scrolling.

CSS and jQuery Solutions

Here's a CSS approach, along with a jQuery fallback for Internet Explorer compatibility:

.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');
}

The corresponding jQuery code:

// 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 });
}

Advanced Techniques and FAQs

A jQuery plugin can also maintain sidebar element visibility during scrolling. Let's address some common questions:

Q: How to keep a div at the screen bottom while scrolling using jQuery?

Use position: fixed in CSS. For example:

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

Replace #yourDiv with your div's ID.

Q: How to find a div's bottom position with jQuery?

Combine offset() and height():

var bottom = $("#yourDiv").offset().top + $("#yourDiv").height();

Q: Why doesn't position: absolute; bottom: 0; update on scroll?

position: absolute positions relative to the nearest positioned ancestor. Without one, it uses the document body and scrolls with the page. Use position: fixed for screen-fixed positioning.

Q: How to get a div's bottom position relative to the viewport using jQuery?

var bottom = $(window).scrollTop() + $(window).height() - $("#yourDiv").offset().top;

Q: How to make a div stick to the bottom of another div using jQuery?

Use the append() method:

$("#parentDiv").append($("#childDiv"));

This enhanced guide provides clearer explanations and improved code formatting for better readability.

The above is the detailed content of jQuery Keep Div on Bottom of Screen. For more information, please follow other related articles on the PHP Chinese website!