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

我的最终目标是有一个网页，看起来是什么东西是我目前拥有的

我的问题是如何让背景保持不变，这样当用户滚动时，剩下的文本就会掩盖图像。我看到并尝试使用

背景附件：修复了
，但没有任何效果，主要是因为我有两个我想使用的背景：主图片（小猫）和背景纹理。我对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>


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');
    });

});

您可以添加一个幻觉，通过使用一些视差滚动效果，使图像以您想要的方式定位。以下是众多链接中的一个，您可以在其中找到有关如何使用背景固定位置、滚动速度等组合为元素添加视差效果的教程和示例：
基本上：

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

关于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

散列将菜单A 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>

在jQuery中，您可以查看窗口滚动顶部并过滤当前位置，然后将活动类设置为相关菜单链接：

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');
});

您正在尝试向图像添加背景附件！不会work@JacobGray我可以有两张背景图片吗？顺便说一句，我不确定你是否还在做改进，但是你的JS可以用几行来写（你在复制/粘贴几乎相同的函数）。谢谢，如果这是我最终使用的，我会检查并接受你的答案！这太棒了，非常感谢。我正试着分离JS，但我想我得到了大部分。我遇到的一个问题是，当我向下滚动时，顶部的项目“婚礼信息”会很快突出显示，因为当您单击
li
时，它工作正常，但滚动时却不行。@nicholas79171这是因为您在屏幕上显示了多个内容，这意味着上面的脚本根本不完美，它只是查找一个元素的匹配。您需要考虑所有可见元素，并找到最底层的元素。你知道了。@nicholas79171不要害怕使用我提供给你的JS，调整它。如上所述，对其进行改进。我也会增加部分之间的空间。我一直在努力解决这个问题。我需要编辑的行是
return$（e）.offset（）.top>=scroll-75正确吗？我敢肯定，它检索的元素刚好高于滚动位置。除了现在，只要我向下滚动75像素，它就会自动变为“婚礼信息”，我不知道为什么。@nicholas79171用更好的方法编辑。如果您遇到一些问题，请告诉我。
<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>

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

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');
});