我有一个较早运行的网站，突然我的可折叠底部没有将视差压低，它确实压低了我的<hr>以及页脚，但没有压低视差窗口，如果有人可以帮助我，我会很高兴我这个。
/*@media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}*/
body {
text-align: center;
background-color: #222;
}
hr {
border-color: #191919;
}
.inf {
color: white;
}
#logo-pc {
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-tablet {
padding-top: 130px;
width: 800px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-smaller {
padding-top: 130px;
width: 600px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
#logo-phone {
padding-top: 190px;
width: 200px;
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255, 0.4); /* Black w/opacity/see-through */
font-weight: bold;
border: 3px solid #f1f1f1;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
padding: 20px;
text-align: center;
}
.panel {
background-image: none;
background-color: #393939;
color: white;
}
button {
width: 200px;
}
.included1 {
font-size: 18pt;
margin-top: 15px;
margin-bottom: 0;
}
.included {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 0px;
}
.included2 {
font-size: 15pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
margin: 5px;
}
.logo-animation {
animation-duration: 3s;
animation-delay: 0.5s;
}
.maten {
font-size: 12pt;
}
.ingredienser {
font-size: 10pt;
color: rgb(255,255,255); /* Fallback color */
color: rgba(255,255,255, 0.5);
}
.overlay {
background:transparent;
position:relative;
width:350px;
height:440px; /* your iframe height */
top:440px; /* your iframe height */
margin-top:-440px; /* your iframe height */
}
/* Footer CSS */
footer {
background: #333;
color: #eee;
font-size: 12px;
padding: 20px;
}
@keyframes heartbeat{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
.heart{
animation: heartbeat 1s infinite;
}
/* END Footer CSS; */<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap CDN v3.3.7 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- //.Bootstrap -->
</head>
<body>
<div class="col-xs-12 col-sm-6 fadeIn wow">
<div class="accordion" id="myAccordion4">
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-13" data-parent="#myAccordion4" style="margin: 10px;">Barnmeny</button>
<div id="collapsible-13" class="collapse">
<h1 class="included">(Korv Meny)</h1>
<hr>
<p class="maten">Smal<br></p>
<h5 class="ingredienser">(Bröd 15:-) (Mos/Pommes 35:-)</h5>
<hr>
<p class="maten">Tjock<br></p>
<h5 class="ingredienser">(Bröd 25:-) (Mos/Pommes 45:-)</h5>
<hr>
<p class="maten">Pommes<br></p>
<h5 class="ingredienser">(Mellan 25:-) (Stor 35:-)</h5>
<hr>
<p class="maten">Fiskpinnar (4st 35:-) (8st 50:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Chicky Bits (5st 40:-) (10st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
<hr>
<p class="maten">Köttbullar (8st 45:-) (20st 60:-)<br></p>
<h5 class="ingredienser">med potatismos & lingon</h5>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-14" data-parent="#myAccordion4" style="margin: 10px;">Salladsmeny 75:-</button>
<div id="collapsible-14" class="collapse">
<h1 class="included1">I alla salladsmenyer ingår</h1>
<h1 class="included">(sallad, tomat, gurka, bröd och dressing)
<hr>
</h1>
<p class="maten">Gyros<br></p>
<h5 class="ingredienser">gyros, lök, sås</h5>
<hr>
<p class="maten">Kycklingsallad<br></p>
<h5 class="ingredienser">kyckling, ananas, salladsost, sås</h5>
<hr>
<p class="maten">Kebabsallad<br></p>
<h5 class="ingredienser">kebabkött, lök, sås</h5>
<hr>
<p class="maten">Grekisk sallad<br></p>
<h5 class="ingredienser">salladsost, oliver, paprika, lök, sås</h5>
<hr>
<p class="maten">Tonfisksallad<br></p>
<h5 class="ingredienser">tonfisk, lök, oliver, sås</h5>
<hr>
<p class="maten">Amerikansk sallad<br></p>
<h5 class="ingredienser">ost, skinka, ananas, sås</h5>
<hr>
<p class="maten">Räksallad 80:-<br></p>
<h5 class="ingredienser">räkor, ost, paprika, citron</h5>
<hr>
</div>
</div>
<div class="panel">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapsible-15" data-parent="#myAccordion4" style="margin: 10px;">Pasta 75:-</button>
<div id="collapsible-15" class="collapse">
<p class="maten">Kyckling Pasta<br></p>
<h5 class="ingredienser">med curry, isbergssallad, tomat, gurka</h5>
<hr>
<p class="maten">Tonfisk Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, lök, dressing</h5>
<hr>
<p class="maten">Gyros Pasta<br></p>
<h5 class="ingredienser">isbergssallad, tomat, gurka, lök, dressing</h5>
<hr>
<p class="maten">Pasta Bolognese<br></p>
<h5 class="ingredienser">köttfärs, lök, sallad, tomat, gurka</h5>
</div>
</div>
</div>
</div><!-- //.col-xs-12 col-sm-6 -->
</div><!-- //.row -->
</div><!-- //.container -->
<hr>
<div style="width: 100%; height: 80vh;" class="parallax-window" data-parallax="scroll" data-image-src="images/visning5.jpg"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>©2018 Bence Papp. All rights reserved.</h6>
</div><!-- //.col-sm-2 -->
<div class="col-sm-3">
<h5>Kontakta oss</h5>
<p>Tel. nr<a href="tel:">tel.</a></p>
<!-- <p>Mailaddress: <a href="mailto: exempel@domän.se">exempel@domän.se</a></p> -->
<a target="_blank" href="https://www.google.se/maps/place/Kristianstadsv%C3%A4gen+703,+295+38+Brom%C3%B6lla/@56.0654977,14.4700173,18z/data=!3m1!4b1!4m5!3m4!1s0x46541fff4df0e3c7:0xdc6c817862e77450!8m2!3d56.0654977!4d14.4711116"><p style="color: white;"><b>Adress</b>Address<br>Address</p></a>
</div><!-- //.col-sm-3 -->
<div class="col-sm-2">
<h5>Hoppa till</h5>
<ul class="unstyled">
<li><a href="#top">Start</a></li>
</ul>
</div><!-- //.col-sm-2 -->
<div class="col-sm-2">
<!-- <h5>Sociala medier</h5>
<ul>
<li><a href="http://www.facebook.com/KHELmaleriochsnickeri" target="_blank">Facebook</a></li>
</ul> -->
</div><!-- //.col-sm-2 -->
<div class="col-md-3">
<h6>Coded with <span class="glyphicon glyphicon-heart heart"></span> by: <span><a href="https://www.facebook.com/beni.papp" target="_blank">Bence</a></span></h6>
</div><!-- //.col-sm-3 -->
</div><!-- //.row -->
</div><!-- //.container -->
</footer>
</body>
</html>它确实将页脚向下推，并且像我说的那样
<hr>，但不推下视差窗口...[编辑（添加js代码）]
/*!
* parallax.js v1.5.0 (http://pixelcog.github.io/parallax.js/)
* @copyright 2016 PixelCog, Inc.
* @license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
;(function ( $, window, document, undefined ) {
// Polyfill for requestAnimationFrame
// via: https://gist.github.com/paulirish/1579671
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
// Parallax Constructor
function Parallax(element, options) {
var self = this;
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this, options);
}
this.$element = $(element);
if (!this.imageSrc && this.$element.is('img')) {
this.imageSrc = this.$element.attr('src');
}
var positions = (this.position + '').toLowerCase().match(/\S+/g) || [];
if (positions.length < 1) {
positions.push('center');
}
if (positions.length == 1) {
positions.push(positions[0]);
}
if (positions[0] == 'top' || positions[0] == 'bottom' || positions[1] == 'left' || positions[1] == 'right') {
positions = [positions[1], positions[0]];
}
if (this.positionX !== undefined) positions[0] = this.positionX.toLowerCase();
if (this.positionY !== undefined) positions[1] = this.positionY.toLowerCase();
self.positionX = positions[0];
self.positionY = positions[1];
if (this.positionX != 'left' && this.positionX != 'right') {
if (isNaN(parseInt(this.positionX))) {
this.positionX = 'center';
} else {
this.positionX = parseInt(this.positionX);
}
}
if (this.positionY != 'top' && this.positionY != 'bottom') {
if (isNaN(parseInt(this.positionY))) {
this.positionY = 'center';
} else {
this.positionY = parseInt(this.positionY);
}
}
this.position =
this.positionX + (isNaN(this.positionX)? '' : 'px') + ' ' +
this.positionY + (isNaN(this.positionY)? '' : 'px');
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
if (this.imageSrc && this.iosFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
if (navigator.userAgent.match(/(Android)/)) {
if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
this.$element.css({
backgroundImage: 'url(' + this.imageSrc + ')',
backgroundSize: 'cover',
backgroundPosition: this.position
});
}
return this;
}
this.$mirror = $('<div />').prependTo(this.mirrorContainer);
var slider = this.$element.find('>.parallax-slider');
var sliderExisted = false;
if (slider.length == 0)
this.$slider = $('<img />').prependTo(this.$mirror);
else {
this.$slider = slider.prependTo(this.$mirror)
sliderExisted = true;
}
this.$mirror.addClass('parallax-mirror').css({
visibility: 'hidden',
zIndex: this.zIndex,
position: 'fixed',
top: 0,
left: 0,
overflow: 'hidden'
});
this.$slider.addClass('parallax-slider').one('load', function() {
if (!self.naturalHeight || !self.naturalWidth) {
self.naturalHeight = this.naturalHeight || this.height || 1;
self.naturalWidth = this.naturalWidth || this.width || 1;
}
self.aspectRatio = self.naturalWidth / self.naturalHeight;
Parallax.isSetup || Parallax.setup();
Parallax.sliders.push(self);
Parallax.isFresh = false;
Parallax.requestRender();
});
if (!sliderExisted)
this.$slider[0].src = this.imageSrc;
if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
this.$slider.trigger('load');
}
}
// Parallax Instance Methods
$.extend(Parallax.prototype, {
speed: 0.2,
bleed: 0,
zIndex: -100,
iosFix: true,
androidFix: true,
position: 'center',
overScrollFix: false,
mirrorContainer: 'body',
refresh: function() {
this.boxWidth = this.$element.outerWidth();
this.boxHeight = this.$element.outerHeight() + this.bleed * 2;
this.boxOffsetTop = this.$element.offset().top - this.bleed;
this.boxOffsetLeft = this.$element.offset().left;
this.boxOffsetBottom = this.boxOffsetTop + this.boxHeight;
var winHeight = Parallax.winHeight;
var docHeight = Parallax.docHeight;
var maxOffset = Math.min(this.boxOffsetTop, docHeight - winHeight);
var minOffset = Math.max(this.boxOffsetTop + this.boxHeight - winHeight, 0);
var imageHeightMin = this.boxHeight + (maxOffset - minOffset) * (1 - this.speed) | 0;
var imageOffsetMin = (this.boxOffsetTop - maxOffset) * (1 - this.speed) | 0;
var margin;
if (imageHeightMin * this.aspectRatio >= this.boxWidth) {
this.imageWidth = imageHeightMin * this.aspectRatio | 0;
this.imageHeight = imageHeightMin;
this.offsetBaseTop = imageOffsetMin;
margin = this.imageWidth - this.boxWidth;
if (this.positionX == 'left') {
this.offsetLeft = 0;
} else if (this.positionX == 'right') {
this.offsetLeft = - margin;
} else if (!isNaN(this.positionX)) {
this.offsetLeft = Math.max(this.positionX, - margin);
} else {
this.offsetLeft = - margin / 2 | 0;
}
} else {
this.imageWidth = this.boxWidth;
this.imageHeight = this.boxWidth / this.aspectRatio | 0;
this.offsetLeft = 0;
margin = this.imageHeight - imageHeightMin;
if (this.positionY == 'top') {
this.offsetBaseTop = imageOffsetMin;
} else if (this.positionY == 'bottom') {
this.offsetBaseTop = imageOffsetMin - margin;
} else if (!isNaN(this.positionY)) {
this.offsetBaseTop = imageOffsetMin + Math.max(this.positionY, - margin);
} else {
this.offsetBaseTop = imageOffsetMin - margin / 2 | 0;
}
}
},
render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;
if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop <= scrollBottom) {
this.visibility = 'visible';
this.mirrorTop = this.boxOffsetTop - scrollTop;
this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1 - this.speed);
} else {
this.visibility = 'hidden';
}
this.$mirror.css({
transform: 'translate3d('+this.mirrorLeft+'px, '+(this.mirrorTop - overScroll)+'px, 0px)',
visibility: this.visibility,
height: this.boxHeight,
width: this.boxWidth
});
this.$slider.css({
transform: 'translate3d('+this.offsetLeft+'px, '+this.offsetTop+'px, 0px)',
position: 'absolute',
height: this.imageHeight,
width: this.imageWidth,
maxWidth: 'none'
});
}
});
// Parallax Static Methods
$.extend(Parallax, {
scrollTop: 0,
scrollLeft: 0,
winHeight: 0,
winWidth: 0,
docHeight: 1 << 30,
docWidth: 1 << 30,
sliders: [],
isReady: false,
isFresh: false,
isBusy: false,
setup: function() {
if (this.isReady) return;
var self = this;
var $doc = $(document), $win = $(window);
var loadDimensions = function() {
Parallax.winHeight = $win.height();
Parallax.winWidth = $win.width();
Parallax.docHeight = $doc.height();
Parallax.docWidth = $doc.width();
};
var loadScrollPosition = function() {
var winScrollTop = $win.scrollTop();
var scrollTopMax = Parallax.docHeight - Parallax.winHeight;
var scrollLeftMax = Parallax.docWidth - Parallax.winWidth;
Parallax.scrollTop = Math.max(0, Math.min(scrollTopMax, winScrollTop));
Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
Parallax.overScroll = Math.max(winScrollTop - scrollTopMax, Math.min(winScrollTop, 0));
};
$win.on('resize.px.parallax load.px.parallax', function() {
loadDimensions();
self.refresh();
Parallax.isFresh = false;
Parallax.requestRender();
})
.on('scroll.px.parallax load.px.parallax', function() {
loadScrollPosition();
Parallax.requestRender();
});
loadDimensions();
loadScrollPosition();
this.isReady = true;
var lastPosition = -1;
function frameLoop() {
if (lastPosition == window.pageYOffset) { // Avoid overcalculations
window.requestAnimationFrame(frameLoop);
return false;
} else lastPosition = window.pageYOffset;
self.render();
window.requestAnimationFrame(frameLoop);
}
frameLoop();
},
configure: function(options) {
if (typeof options == 'object') {
delete options.refresh;
delete options.render;
$.extend(this.prototype, options);
}
},
refresh: function() {
$.each(this.sliders, function(){ this.refresh(); });
this.isFresh = true;
},
render: function() {
this.isFresh || this.refresh();
$.each(this.sliders, function(){ this.render(); });
},
requestRender: function() {
var self = this;
self.render();
self.isBusy = false;
},
destroy: function(el){
var i,
parallaxElement = $(el).data('px.parallax');
parallaxElement.$mirror.remove();
for(i=0; i < this.sliders.length; i+=1){
if(this.sliders[i] == parallaxElement){
this.sliders.splice(i, 1);
}
}
$(el).data('px.parallax', false);
if(this.sliders.length === 0){
$(window).off('scroll.px.parallax resize.px.parallax load.px.parallax');
this.isReady = false;
Parallax.isSetup = false;
}
}
});
// Parallax Plugin Definition
function Plugin(option) {
return this.each(function () {
var $this = $(this);
var options = typeof option == 'object' && option;
if (this == window || this == document || $this.is('body')) {
Parallax.configure(options);
}
else if (!$this.data('px.parallax')) {
options = $.extend({}, $this.data(), options);
$this.data('px.parallax', new Parallax(this, options));
}
else if (typeof option == 'object')
{
$.extend($this.data('px.parallax'), options);
}
if (typeof option == 'string') {
if(option == 'destroy'){
Parallax.destroy(this);
}else{
Parallax[option]();
}
}
});
}
var old = $.fn.parallax;
$.fn.parallax = Plugin;
$.fn.parallax.Constructor = Parallax;
// Parallax No Conflict
$.fn.parallax.noConflict = function () {
$.fn.parallax = old;
return this;
};
// Parallax Data-API
$( function () {
$('[data-parallax="scroll"]').parallax();
});
}(jQuery, window, document));[编辑]
我正在使用这个parallax.js
提前致谢！
最佳答案
首先，您应该验证HTML，缺少</head>和<body>标记，此外还有两个</div>。 （第96行或类似的内容）
为了您的目的，我认为parallax.js太过分了。您可以只使用background: url('./image.jgp') 50% 50%; background-size: cover; background-attachment: fixed;。
您的内容有80vh，当它溢出时（面板会这样做），那么它将使您的页脚和其他内容变得混乱。也许您可以使用position: absolute;。