我有一个div，我想坚持浏览器窗口的底部（实际的浏览器窗口不是页面）。当用户滚动时，div需要保持在浏览器窗口的底部。
现在，div将在第一个初始滚动时粘在窗口的底部，但每次有新滚动时它都不会重新定位。以下是我对jQuery的看法：
var c = 3942015886343226874;
console.log(c);
这是一个jsfiddle http://jsfiddle.net/3ecx7zp9/1/
答案 0 :(得分：25)
答案 1 :(得分：4)
您是否考虑使用固定位置div？设置position: fixed和bottom: 77px
但是，如果必须使用jQuery解决方案，请将代码更改为
$(window).scroll(function () {
var bHeight = $(window).height();
var offset = $(window).scrollTop();
$('.test').css({
top: bHeight + offset - 77 + 'px'
});
});
http://jsfiddle.net/3ecx7zp9/6/
考虑到你滚动了多远，并相应地设置了div的位置
答案 2 :(得分：3)
在CSS中使用var $ = require('jquery');
var overlay;
var map;
var USGSOverlay;
//map_area is defined inline, but for this post...
var map_area = new Array('45.684994,-73.731739','45.684616,-73.732816','45.684450,-73.732558','45.684659,-73.732002','45.684832,-73.731602');
window.launchMap = function() {
initialize();
}
USGSOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
// Create the img element and attach it to the div.
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
// Add the element to the "overlayLayer" pane.
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
function USGSOverlay(bounds, image, map) {
// Initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
// Define a property to hold the image's div. We'll
// actually create this div upon receipt of the onAdd()
// method so we'll leave it null for now.
this.div_ = null;
// Explicitly call setMap on this overlay.
this.setMap(map);
}
USGSOverlay.prototype.draw = function() {
// We use the south-west and north-east
// coordinates of the overlay to peg it to the correct position and size.
// To do this, we need to retrieve the projection from the overlay.
var overlayProjection = this.getProjection();
// Retrieve the south-west and north-east coordinates of this overlay
// in LatLngs and convert them to pixel coordinates.
// We'll use these coordinates to resize the div.
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Resize the image's div to fit the indicated dimensions.
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
function initialize() {
USGSOverlay.prototype = new google.maps.OverlayView();
var mapOptions = {
zoom: 16,
scrollwheel: false,
center: new google.maps.LatLng(45.684163, -73.733305),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker_pin = "/images/site/Pin.png";
var swBound = new google.maps.LatLng(45.678510, -73.747798);
var neBound = new google.maps.LatLng(45.692415, -73.718118);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
// The photograph is courtesy of the U.S. Geological Survey.
var srcImage = 'map.png';
// The custom USGSOverlay object contains the USGS image,
// the bounds of the image, and a reference to the map.
overlay = new USGSOverlay(bounds, srcImage, map);
infowindow = new google.maps.InfoWindow({
content: "Chargement..."
});
var areaCoords = [];
if (map_area.length > 0) {
for (i = 0; i < map_area.length; i++) {
areaCoords[i] = new Array();
for (j = 0; j < map_area[i].length; j++) {
coord = map_area[i][j].split(',');
areaCoords[i][j] = new google.maps.LatLng(coord[0], coord[1]);
}
polygonMap = new google.maps.Polygon({
paths: areaCoords[i],
strokeColor: '#ff2205',
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: '#ff2205',
fillOpacity: 0
});
polygonMap.setMap(map);
}
// Add a listener for the click event.
/*google.maps.event.addListener(polygonMap, 'click', function() {
}); */
}
$('.block_unit').each(function(index, element) {
var _lat = $(this).find('.address').data('lat');
var _lng = $(this).find('.address').data('lng');
latLng = new google.maps.LatLng(_lat, _lng)
$(this).next('.map_popup').find('.text').html($(this).find('.block__title').html());
var info = $(this).next('.map_popup').html();
//info.find('.text').html($(this).find('.block__title').html());
var marker = new google.maps.Marker({
map: map,
position: latLng,
icon: new google.maps.MarkerImage(marker_pin)
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: info});
infowindow.open(map, marker);
});
});
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp' +
'&signed_in=true&callback=launchMap';
document.body.appendChild(script);
}
window.onload = loadScript;
代替position: fixed;。
答案 3 :(得分：3)
您要使用position: fixed;吗？
答案 4 :(得分：2)
你去：
<div class="test" style="position: fixed; width: 100%; height: 77px; background-color: #333;left:0;bottom:0"></div>
答案 5 :(得分：1)
检查以下链接是否适合您。
#footer {
position: fixed;
bottom: 0;
height: 77px;
width: 100%;
background-color: #333;
}
答案 6 :(得分：1)
这正是位置：fixed是专为：
而设计的#footer {
position: fixed;
bottom: 0;
width: 100%;
}