我已经看到了与此类似的问题,但是不同之处在于我可以提供一个测试案例,但没有找到解决方案。
我正在使用仅ccs的视差实现。问题是我需要在页脚中有一个窗体,当屏幕为768px或更大时,该窗体可以固定到窗口的底部。我找不到一种方法可以将其从父级框中分离出来(使用固定位置或绝对位置)。
有什么建议么?请只使用Javascript。需要更多信息请告知我。
实时示例http://www.perthminiexcavatorhire.com.au/
的HTML
<!--MAIN -->
<!--===============================================================-->
<main class="main">
<section class="slides row"><!-- absolute-->
<div class="slide" id="slide-1"><!-- relative-->
<div class="slide__bg"></div><!-- absolute-->
<div class="slide__text row">
<div class="well panel_well one_edge_shadow row" >
<?php include 'includes/content/panel1.php'; ?>
</div>
</div>
</div>
<div class="slide" id="slide-2"> <!-- absolute-->
<div class="slide__bg one_edge_shadow"></div><!-- relative-->
<div class="slide__content row"><!-- absolute-->
<div class="slide__testomonial">
<section class="row">
<?php include 'includes/content/embedded-video.php'; ?>
</section>
</div>
</div>
</div>
<!-- Panel3 ==========================================-->
<div class="slide" id="slide-3"><!-- absolute-->
<div class="slide__bg"></div><!-- relative-->
<div class="slide__content row"><!-- absolute-->
<div class="slide__text">
<div class="well panel_well one_edge_shadow row">
<?php include 'includes/content/panel2.php'; ?>
</div>
</div>
</div>
</div>
<!-- FORM==========================================-->
<div class="slide " id="slide-4"><!-- absolute-->
<div class="slide__bg"></div><!-- relative-->
<div class="slide__content row"><!-- absolute-->
<section class="footer slide__footer">
<?php include 'includes/content/form.php'; ?>
</section>
</div>
</div>
</section>
</main>
的CSS
/*FORM*/
form{position: fixed; bottom: 0;left: 0; width: 100%;background-color: black;display: block;}
/* PARALLAX STYLES
--------------------------------------------- */
.slides{overflow: hidden}
.slide {
position: relative;/*to background*/
}
/* slide background */
.slide__bg {
position: absolute;/*in relation to slide container*/
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;/*bottom layer*/;
}
#slide-1 .slide__bg {
background-color: darkcyan;
}
/*non critical styling*/
#slide-2 .slide__bg {
background-color: darkmagenta;
}
/*non critical styling*/
#slide-3 .slide__bg {
background-color: darkgoldenrod
}
/*non critical styling*/
#slide-4 .slide__bg {
background-color: darkblue;
}
.slides {
position: absolute;/*position container in window*/
width: 100%;/*fill container*/
height: 100%;/*fill container*/
perspective: 400px;/*dictates size of slide--bg*/
overflow-x: hidden;/*hide scroll bar*/
overflow-y: auto;/*hide scroll bar*/
}
.slides::-webkit-scrollbar {
display: none;/*hide scroll bar*/
}
/* Only apply to larger screens
--------------------------------------------- */
@media screen and (min-width: 768px) {
/* parallax */
@supports ((perspective: 1px) and (not (-webkit-overflow-scrolling: touch))) {
body {
transform: translateZ(0px); /* Fix paint issues in Edge && Safari H/W acceleration */
}
.slide, .slide__content {
transform-style: preserve-3d;/* maintain perspective effect*/
}
.slide__text {
transform: translateZ(60px) scale(.7);/*set text distance from page and scale*/
transform-origin: 50% 50%;/*position of text on slide*/
/*background-color: aqua; */
background-color: red;
height: 800px;
}
.slide__testomonial {
transform: translateZ(80px) scale(.7);/*set text distance from page and scale*/
transform-origin: 50% 50%;/*position of text on slide*/
background-color: aqua;
height: 800px;
}
.slide__footer {
transform: translateZ(60px) scale(.7);/*set text distance from page and scale*/
transform-origin: 50% 50%;/*position of text on slide*/
background-color: green;
height: 400px;
}
.slide:nth-child(2n) {
z-index: 1; /* ensure EVERY OTHER SLIDE overlays correctly */
}
.slide:nth-child(2n+1):not(:first-child) .slide__bg {
top: -16%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING FIRST - extend slide__bg to meet next bg to fill gap*/
bottom: -50%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING
}
.slide:nth-child(2n) .slide__bg {
transform: translateZ(59px) scale(.85);/*SELECTS EVERY EVEN SLIDE AFTER THE FIRST - set background distance from page and scale to match window*/
}
.slide:nth-child(2n+1):not(:last-child) .slide__bg {
bottom: -50%;/*SELECTS EVERY ODD SLIDE NOT INCLUDING LAST extend slide__bg to meet next bg to fill gap*/
}
}
可能您的容器有
position: relative
JS的示例,请将其添加到html元素下。
<script type="text/javascript">
window.onload = function() {
var elem = document.getElementById("yourElement");
document.body.appendChild(elem);
};
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句