多个背景图像，一个覆盖另一个

时间：2015-03-10 00:47:28

标签： javascript jquery html css

我的最终目标是建立一个看起来像like this. Here的网页。

我的问题是如何让背景粘住，以便当用户滚动时，文本的其余部分会覆盖图像。我看到了this post，试图和background-attachment: fixed一起玩，但无法正常工作，主要是因为我有两个背景我想用：主要图片（小猫），以及纹理我用于背景。我对JavaScript或JQuery解决方案持开放态度，因为我已经将它用于其他功能。

这是HTML：

    <div id='cssmenu'>
    <ul>
       <li id="menu-one" class="active"><a href="#"><span>Home</span></a></li>
       <li id="menu-two"><a href="#"><span>Wedding Info</span></a></li>
       <li id="menu-three"><a href="#"><span>Direcitions</span></a></li>
       <li id="menu-four"><a href="#"><span>Registry</span></a></li>
       <li id="menu-five" class='last'><a href="#"><span>RSVP</span></a></li>
    </ul>
    </div>

    <div class="before_content"></div>

    <div id="item-one">

        <!--<h2 class="names" name='top'>Bob + Suzy</h2>-->

        <img src="http://placekitten.com/g/1000/400" alt="Snow" class="background">

    </div>

    <div id="item-two">
        <h3 class="date">Wedding Info</h3>
        <p>Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>
    </div>

    <div id="item-three">  
        <h3 class="date">Directions</h3>
        <p>Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>
    </div>

    <div id="item-four">
        <h3 class="date">Registry</h3>
        <p>Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>
    </div>

    <div id="item-five">
        <h3 class="date">RSVP</h3>
        <p>Paragraph 4: Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna
            aliqua. Ut enim ad minim veniam, quis nostrud exercitation
            ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
            aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt
            mollit anim id est laborum.</p>     
    </div>              

    <footer>
        <a href="#">Some footer text</a>
    </footer>

    <script language="javascript" type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/scroll.js"></script>

</body>

CSS：

@font-face {
    font-family: 'Abraham Lincoln';
    src: url(../fonts/Abraham-Lincoln/AbrahamLincoln.ttf);
}

@font-face {
    font-family: 'Ingleby';
    src: url(../fonts/Ingleby/Ingleby_regular);
}

body {
  font-family: 'Ingleby';
  background-image: url(../Images/background.jpg);
  background-repeat: repeat;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.clearfix:after {
    display: block;
    clear: both;
}

h2.names {
    font-size: 36px;
    text-align: center;
    font-family: 'Abraham Lincoln';
}

h3.date {
    font-size: 28px;
    text-align: center;
    font-family: 'Abraham Lincoln';
}

h4 {
    font-size: 20px;
    text-align: center;
    font-family: 'Abraham Lincoln';
}

p {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
}

.background {
    width: 100%;
  background-attachment: fixed;
    display: block;
    margin: 0px auto;
    margin-top: 0px;
}

footer {
    text-align: right;
    font-size: 12px;
    height: 30px;
    background-color: rgb(59, 58, 76);
    width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
}

footer a {
    text-align: right;
    text-decoration: none;
    display: block;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    color: black;
    font-size: 12px;
    padding-top: 12px;
}

footer a:hover {
    text-decoration: underline;
}

#map-canvas {
    height: 50%;
    margin-top: 200px;
    padding: 200px;
}

/* ------------ */
/*   PICTURES   */
/* ------------ */

.wrapper {
    width: 720px;
    margin: 0px auto;
    display: block;
}

.grow { 
    -webkit-transition: all .2s ease-in-out; /* Safari and Chrome */
    -moz-transition: all .2s ease-in-out; /* Firefox */
    -ms-transition: all .2s ease-in-out; /* IE 9 */
    -o-transition: all .2s ease-in-out; /* Opera */
    transition: all .2s ease-in-out; 
    margin: 20px;
}
.grow:hover { 
    -webkit-transform: scale(1.1); /* Safari and Chrome */
    -moz-transform: scale(1.1); /* Firefox */
    -ms-transform: scale(1.1); /* IE 9 */
    -o-transform: scale(1.1);
    transform: scale(1.1); 
    z-index: -100;
}

/* ------------ */
/*   NEW MENU   */
/* ------------ */

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 14px;
}

ul {
    text-align: center;

}
#cssmenu {
  line-height: 1;
  background: rgb(43, 41, 59)   ;
  /*
  background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
  background: -o-linear-gradient(top, #333333 0%, #141414 100%);
  background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
  background: linear-gradient(to bottom, #333333 0%, #141414 100%); */
  border-bottom: 5px solid rgb(117, 144,    112 );
  width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  /*
  background: -moz-linear-gradient(top, #333333 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333333), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #333333 0%, #141414 100%);
  background: -o-linear-gradient(top, #333333 0%, #141414 100%);
  background: -ms-linear-gradient(top, #333333 0%, #141414 100%);
  background: linear-gradient(to bottom, #333333 0%, #141414 100%);
  */
  color: white;
  display: block;
  font-family: "Ingleby";
  font-size: 50px;
  padding: 19px 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  display: inline-block;
  margin: 0;
}
#cssmenu.align-center {
  text-align: center;
}
#cssmenu.align-center > ul > li {
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > a {
  color: #ffffff;
  font-size: 12px;
  transition: background-color 0.5s ease;
  -webkit-transition: background-color 0.5s ease;
  -moz-transition: background-color 0.5s ease;
  -o-transition: background-color 0.5s ease;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgb(117,    144,    112 );
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  /*
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
  */
}
#cssmenu.align-right > ul > li:first-child > a,
#cssmenu.align-center > ul > li:first-child > a {
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}
#cssmenu.align-right > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a {
  color: white;
  /*
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  */
  background: #403D57;
  /*
  background: -moz-linear-gradient(top, #262626 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #262626), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #262626 0%, #070707 100%);
  background: -o-linear-gradient(top, #262626 0%, #070707 100%);
  background: -ms-linear-gradient(top, #262626 0%, #070707 100%);
  background: linear-gradient(to bottom, #262626 0%, #070707 100%);
  */
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu.align-right .has-sub ul {
  left: auto;
  right: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #31b7f1;
  font-size: 11px;
  filter: none;
  display: block;
  line-height: 120%;
  padding: 10px;
  color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu ul ul li:hover > a {
  color: #ffffff;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu.align-right .has-sub .has-sub ul,
#cssmenu.align-right ul ul ul {
  left: auto;
  right: 100%;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #31b7f1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #0a6d98;
}
#cssmenu ul ul li.last > a,
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul ul li.last > a,
#cssmenu ul ul ul li:last-child > a,
#cssmenu .has-sub ul li:last-child > a,
#cssmenu .has-sub ul li.last > a {
  border-bottom: 0;
}

/* Make menu bar stay at top */

#cssmenu {
    position: fixed;
    top: 0;
    width: 100%;
}

h2 {
    margin-top: 75px; 
}

JavaScript的：

$(document).ready(function(){

    var itemFour = $("#item-four");
    var position = itemFour.offset();

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= $("#item-five").offset().top - 75) {
            $("li").removeClass('active');
            $("#menu-five").addClass('active');
        } else if (scroll >= $("#item-four").offset().top - 75) {
            $("li").removeClass('active');
            $("#menu-four").addClass('active');
        } else if (scroll >= $("#item-three").offset().top - 75) {
            $("li").removeClass('active');
            $("#menu-three").addClass('active');
        } else if (scroll >= $("#item-two").offset().top - 75) {
            $("li").removeClass('active');
            $("#menu-two").addClass('active');
        } else {
            $("li").removeClass('active');
            $("#menu-one").addClass('active');
        }
    });

    $("#menu-one").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-one").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    });

    $("#menu-two").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-two").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    });

    $("#menu-three").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-three").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    }); 

    $("#menu-four").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-four").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    });

    $("#menu-five").click(function() {
        $('html, body').animate({
            scrollTop: $("#item-five").offset().top - 74
        }, 'slow');
        $("li").removeClass('active');
        $(this).addClass('active');
    });

});

2 个答案:

答案 0 :(得分：3)

基本上是：

<div class="imageCover" style="background-image:url(http://placekitten.com/1000/400)"></div>

CSS：

.imageCover{
  height:500px;
  background: none 50% / cover fixed;
}

关于你的jQuery，这就是你所需要的：

$(function(){

    var $menuLi = $("[id^=menu-]");
    var $itemEl = $("[id^=item-]");

    $(window).on("scroll resize", function() { // check also on resize!
        var scroll = $(window).scrollTop();
        var currId = $itemEl.filter(function(i, e){ // Filter items
          return $(e).offset().top >= scroll - 75;  // retrieve a match
        })[0].id.split("-")[1];                     // get it's suffix (i.e: "two")
        $("#menu-"+currId).addClass("active").siblings().removeClass("active");
    });

    $menuLi.click(function() {
        var num = this.id.split("-")[1]; // get "one", "two"...
        var y   = $("#item-"+ num).offset().top-74;
        $('html, body').animate({scrollTop: y }, 'slow');
    });

});

使用#href到#id

的更好方法

<强> jsBin demo

Hash-Link 菜单HREF到所需的文章ID元素，如：

<nav>
    <ul id="menu">
      <li><a href="#home" class="active">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
</nav>

<div class="imageCover" style="background-image:url(image1.jpg)"></div>
<article id="home"><h1>Home</h1><p>Content</p></article>

<div class="imageCover" style="background-image:url(image2.jpg)"></div>
<article id="home"><h1>About</h1><p>Content</p></article>

<div class="imageCover" style="background-image:url(image3.jpg)"></div>
<article id="home"><h1>Contact</h1><p>Content</p></article>

其中，哈希href="#about"与id="about" article相关。

CSS：

nav{
  background: hsla(0, 0%, 100%, 0.9);
  position:fixed;
  width:100%;
  box-shadow: 0 3px 5px hsla(0, 0%, 0%, 0.4);
}
#menu li, #menu a{
  display: inline-block;
}
#menu  a{
  padding: 15px 25px;
  text-decoration: none;
  border-right:1px solid #fff;
  color:#000;
}
#menu a.active{
  background: #dca;
}
.imageCover{
  height:500px;
  background: none 50% / cover fixed;
}
article{
  margin: 0 auto;
  padding: 50px;
  width: 80%;
  max-width: 1140px;
}

在jQuery内部，您可以观看窗口scrollTop并过滤当前位置，将活动类设置为相关的菜单链接：

var $link = $("#menu a");
var $arti = $("article");

$(window).on("scroll resize", function() { 
    var scroll = $(this).scrollTop();
    var id = $arti.filter(function(i, el){
      return $(el).offset().top >= scroll;
    })[0].id;
          $link.removeClass("active");
    $("#menu a[href$="+id+"]").addClass("active");
});

$link.click(function( e ) {
          e.preventDefault(); // Don't follow link!
    var y   = $( $(this).attr("href") ).offset().top;
    $('html, body').stop().animate({scrollTop: y }, 'slow');
});

答案 1 :(得分：0)

您可以使用一些视差滚动效果添加一个幻觉，使图像按照您想要的方式定位。这是众多链接中的一个，您可以在其中找到有关如何使用背景固定位置，滚动速度等组合为元素添加视差效果的教程和示例：https://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

相关问题
最新问题