Question

我试图包含4个背景，并在每个页面的部分中淡入新的背景。

我检查了我的变量，他们都很好。这个if语句中的某些东西似乎不起作用，我无法弄清楚它是什么。

if (win > splashHeight && win < splashHeight + sec1height) {
    $('#background1').fadeTo( 'slow', 1 );
} else {
    $('#background1').fadeTo( 'slow', 0 );   
}

if (win > splashHeight + sec1height && win < splashHeight + sec1height + sec2height) {
    $('#background2').fadeTo( 'slow', 1 );
} else {
    $('#background2').fadeTo( 'slow', 0 );   
}

if (win > splashHeight + sec1height + sec2height && win < splashHeight + sec1height + sec2height + sec3height) {
   $('#background3').fadeTo( 'slow', 1 );
} else {
    $('#background3').fadeTo( 'slow', 0 );   
}

有谁知道我在哪里出错？我看不到它。

Answer 1

我希望直接在滚动时检查每个背景不透明度状态，而不是使用条件逻辑。这项工作对我来说：

$(window).scroll(function () {
    var splashHeight = $('#splash').height() - 30;
    var sec1height = $('#section1').height() - 30;
    var sec2height = $('#section2').height() - 30;
    var sec3height = $('#section3').height() - 30;
    var win = $(window).scrollTop();
    
    var bg1 = win > splashHeight && win < splashHeight + sec1height ? 1 : 0;
    
    var bg2 = win > splashHeight + sec1height && win < splashHeight + sec1height + sec2height ? 1 : 0;
    
    var bg3 = win > splashHeight + sec1height + sec2height ? 1 : 0;
    
    $('#background1').stop().fadeTo('slow', bg1);
    $('#background2').stop().fadeTo('slow', bg2);
    $('#background3').stop().fadeTo('slow', bg3);
})

body {
    padding: 0;
    margin: 0;
}
section, #splash {
    height: 900px;
    z-index: 2;
}
#background1 {
    opacity: 0;
    height: 100vh;
    position: fixed;
    width: 100%;
    z-index: -1;
    background: -moz-linear-gradient(-45deg, #4eacc4 0%, #3d26d3 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#4eacc4),           color-stop(100%,#3d26d3)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #4eacc4 0%,#3d26d3 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #4eacc4 0%,#3d26d3 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #4eacc4 0%,#3d26d3 100%); /* IE10+ */
    background: linear-gradient(135deg, #4eacc4 0%,#3d26d3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4eacc4', endColorstr='#3d26d3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#background2 {
    opacity: 0;
    height: 100vh;
    width: 100%;
    position: fixed;
        z-index: -1;
    background: #edbd5e; /* Old browsers */
background: -moz-linear-gradient(-45deg, #edbd5e 0%, #1a8c57 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#edbd5e), color-stop(100%,#1a8c57)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #edbd5e 0%,#1a8c57 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #edbd5e 0%,#1a8c57 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #edbd5e 0%,#1a8c57 100%); /* IE10+ */
background: linear-gradient(135deg, #edbd5e 0%,#1a8c57 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edbd5e', endColorstr='#1a8c57',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#background3 {
    opacity: 0;
    height: 100vh;
    width: 100%;
    position: fixed;
        z-index: -1;
    background: #f4619a; /* Old browsers */
background: -moz-linear-gradient(-45deg, #f4619a 0%, #0f3a54 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f4619a), color-stop(100%,#0f3a54)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, #f4619a 0%,#0f3a54 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, #f4619a 0%,#0f3a54 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, #f4619a 0%,#0f3a54 100%); /* IE10+ */
background: linear-gradient(135deg, #f4619a 0%,#0f3a54 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4619a', endColorstr='#0f3a54',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background" id="background1"></div>
<div class="background" id="background2"></div>
<div class="background" id="background3"></div>

<div id="splash">
  <h1>Splash Page</h1>
</div>

<section id="section1">
  <h2>Section 1 (red)</h2>
</section>

<section id="section2">
  <h2>Section 2 (blue)</h2>
</section>

<section id="section3">
  <h2>Section 3 (green)</h2>
</section>

http://jsfiddle.net/0qxk45gp/1/

没有解释为什么这不起作用 - 褪色背景渐变 - JQuery

1 个答案: