Javascript 背景固定与滚动效果?
我一直在使用我的代码,我正在尽最大努力创建一个背景固定CSS,jQuery滚动方式与此完全相同: 正如您所看到的,它为每个div和section上下滚动 到目前为止,我在HTML上的内容如下:Javascript 背景固定与滚动效果?,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我一直在使用我的代码,我正在尽最大努力创建一个背景固定CSS,jQuery滚动方式与此完全相同: 正如您所看到的,它为每个div和section上下滚动 到目前为止,我在HTML上的内容如下: <header class="header"> <h1>Fixed Background Effect</h1> </header> <section class="background-fixed img-1">
<header class="header">
<h1>Fixed Background Effect</h1>
</header>
<section class="background-fixed img-1">
<div class="main-content">
<h2>Title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
</section>
<section class="background-fixed img-2">
<div class="main-content light-background">
<h2>Title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
</section>
<section class="background-fixed img-3">
<div class="main-content">
<h2>Title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
</section>
<section class="background-fixed img-4" data-type="slider-item">
<div class="main-content">
<h2>Title here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolor beatae, laudantium eos fugiat, deserunt delectus quibusdam quae placeat, tempora ea? Nulla ducimus, magnam sunt repellendus modi, ad ipsam est.</p>
</div>
</section>
<footer>
<p>© Copyright 2015 </p>
</footer>
以下是我的JSFIDLE:
非常感谢任何能帮助我的人 只需添加
背景附件:已修复(全屏查看)
/*-------------------------------------
初级风格
-------------------------------- */
*,*::之后,*::之前{
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
}
html,正文{
身高:100%;
}
html{
字体大小:62.5%;
}
身体{
字体大小:1.6rem;
字体系列:“开放式Sans”,无衬线;
颜色:#0f594d;
背景色:#f2e6cd;
}
a{
颜色:#93a748;
文字装饰:无;
}
/* --------------------------------
主要成分
-------------------------------- */
.标题{
位置:相对位置;
身高:100%;
背景色:#34495e;
z指数:1;
}
.标题h1{
宽度:90%;
颜色:#f2e6cd;
文本对齐:居中;
字号:2.2rem;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
位置:绝对位置;
左:50%;
最高:50%;
底部:自动;
右:自动;
-webkit转换:translateX(-50%)translateY(-50%);
-moz变换:translateX(-50%)translateY(-50%);
-ms转换:translateX(-50%)translateY(-50%);
-o变换:translateX(-50%)translateY(-50%);
转化:translateX(-50%)translateY(-50%);
}
@仅介质屏幕和(最小宽度:768px){
.cd头h1{
字体大小:3.6rem;
字体大小:300;
}
}
.背景固定{
位置:相对位置;
填充:3em 5%0;
背景重复:无重复;
背景尺寸:封面;
背景位置:中心;
}
.背景固定h2,.背景固定p{
颜色:#f2e6cd;
-webkit字体平滑:抗锯齿;
-moz osx字体平滑:灰度;
}
.背景固定h2{
字体大小:2.4rem;
边缘底部:1米;
}
.背景固定{
线高:1.6;
字体系列:“Merriweather”,衬线;
}
.背景固定。灯光背景h2。背景固定。灯光背景p{
颜色:#0f594d;
}
.background已修复。主要内容::after{
/*小型设备上的手机图像*/
内容:'';
显示:块;
宽度:100%;
填充:60%0;
保证金:2米自动0;
}
.background-fixed.img-1{
背景色:#bf5138;
}
.background-fixed.img-2{
背景色:#f2e6cd;
}
.background-fixed.img-3{
背景色:#0f594d;
}
.background-fixed.img-4{
背景色:#db9537;
}
@仅介质屏幕和(最小宽度:768px){
.背景固定{
身高:100%;
填充:0;
}
.背景固定h2{
字体大小:3.6rem;
字体大小:300;
}
.背景固定p{
字体大小:1.8rem;
线高:1.8;
}
.背景固定{
背景附件:固定;
}
.background-fixed.img-1{
背景图像:url(“http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-1.jpg");
}
.background-fixed.img-2{
背景图像:url(“http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-2.jpg");
}
.background-fixed.img-3{
背景图像:url(“http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-3.jpg");
}
.background-fixed.img-4{
背景图像:url(“http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-4.jpg");
}
}
页脚{
背景:#达达达;
填充:15px0;
}
页脚p{
颜色:#000;
文本对齐:居中;
}
固定背景效果
标题在这里
Lorem ipsum dolor sit amet,奉献精英。你是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说?这是一个很好的例子
标题在这里
Lorem ipsum dolor sit amet,奉献精英。你是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说?这是一个很好的例子
标题在这里
Lorem ipsum dolor sit amet,奉献精英。你是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说?这是一个很好的例子
标题在这里
Lorem ipsum dolor sit amet,奉献精英。你是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说,我是说?这是一个很好的例子
&抄袭;版权所有2015
首先,各部分之间有很大的空间参见图:其次,当我单击箭头时,如何将滚动导航放置在每个部分的哪个位置?它没有回答我的问题。
.header {
position: relative;
height: 100%;
background-color: #34495e;
z-index: 1;
}
.header h1 {
width: 90%;
color: #f2e6cd;
text-align: center;
font-size: 2.2rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
@media only screen and (min-width: 768px) {
.cd-header h1 {
font-size: 3.6rem;
font-weight: 300;
}
}
.background-fixed {
position: relative;
padding: 3em 5% 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.background-fixed h2, .background-fixed p {
color: #f2e6cd;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.background-fixed h2 {
font-size: 2.4rem;
margin-bottom: 1em;
}
.background-fixedp {
line-height: 1.6;
font-family: "Merriweather", serif;
}
.background-fixed .light-background h2, .background-fixed .light-background p {
color: #0f594d;
}
.background-fixed .main-content::after {
/* phone image on small devices */
content: '';
display: block;
width: 100%;
padding: 60% 0;
margin: 2em auto 0;
}
.background-fixed.img-1 {
background-color: #bf5138;
}
.background-fixed.img-2 {
background-color: #f2e6cd;
}
.background-fixed.img-3 {
background-color: #0f594d;
}
.background-fixed.img-4 {
background-color: #db9537;
}
@media only screen and (min-width: 768px) {
.background-fixed {
height: 100%;
padding: 0;
}
.background-fixed h2 {
font-size: 3.6rem;
font-weight: 300;
}
.background-fixed p {
font-size: 1.8rem;
line-height: 1.8;
}
.background-fixed.img-1 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-1.jpg");
}
.background-fixed.img-2 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-2.jpg");
}
.background-fixed.img-3 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-3.jpg");
}
.background-fixed.img-4 {
background-image: url("http://halloweenmaternitycostumes.com/wp-content/uploads/2015/06/img-4.jpg");
}
}
footer {
background: #dadada;
padding: 15px 0;
}
footer p{
color: #000;
text-align:center;
}