背景固定与滚动效果？

我坚持我的代码和我想我最好的创造与jQuery滚动一模一样这样的背景固定的CSS：http://goo.gl/knvjda 背景固定与滚动效果？

正如你可以看到它上下滚动每个格和节。

到目前为止，这是我对我的HTML：

<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>&copy; Copyright 2015 </p> 
</footer>

这里是我的CSS：

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

这里是我的jsfiddle：https://jsfiddle.net/v7a58odd/1/

非常感谢你的人谁可以帮助我。

来源

2015-06-23 Kimberly Wright

只需添加background-attachment:fixed（查看这个在全屏看到它）

/* -------------------------------- 
 

 
Primary style 
 

 
-------------------------------- */ 
 
*, *::after, *::before { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
html { 
 
    font-size: 62.5%; 
 
} 
 

 
body { 
 
    font-size: 1.6rem; 
 
    font-family: "Open Sans", sans-serif; 
 
    color: #0f594d; 
 
    background-color: #f2e6cd; 
 
} 
 

 
a { 
 
    color: #93a748; 
 
    text-decoration: none; 
 
} 
 

 
/* -------------------------------- 
 

 
Main Components 
 

 
-------------------------------- */ 
 
.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{ 
 
     background-attachment:fixed; 
 
    } 
 
    .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; 
 
}

\t <header class="header"> 
 
\t \t <h1>Fixed Background Effect</h1> 
 
\t </header> 
 
\t 
 
\t <section class="background-fixed img-1"> 
 
\t \t <div class="main-content"> 
 
\t \t \t <h2>Title here</h2> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </section> 
 

 
\t <section class="background-fixed img-2"> 
 
\t \t <div class="main-content light-background"> 
 
\t \t \t <h2>Title here</h2> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </section> 
 

 
\t <section class="background-fixed img-3"> 
 
\t \t <div class="main-content"> 
 
\t \t \t <h2>Title here</h2> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </section> 
 

 
\t <section class="background-fixed img-4" data-type="slider-item"> 
 
\t \t <div class="main-content"> 
 
\t \t \t <h2>Title here</h2> 
 
\t \t \t <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> 
 
\t \t </div> 
 
\t </section> 
 

 

 
<footer> 
 
\t <p>&copy; Copyright 2015 </p> 
 
</footer>

来源

2015-06-23 10:36:29 Akshay

首先是各部分之间的大空间看到的图像：http://prntscr.com/7ka5vo第二如何我可以把那个滚动的导航放在哪里，当我点击箭头的时候，它会进入每节的截面？ –

它不回答我的问题。 –

@KimberlyWright为什么？你试过滚动吗？ – Akshay

背景固定与滚动效果？

回答

相关问题