Question

我正在使用这段代码为网站上的div背景制作视差效果http://ovariancancer.com.au/#acts

$(document).ready(function(){

    //gets height
    var pContainerHeight = $('#heightid').outerHeight(true);
    console.log(pContainerHeight);
    //gives div that height
    $('.kujoimgpos').css({'height' : pContainerHeight + 'px'});

    $(window).scroll(function(){

        var scrollStart = $('#imgstart').offset().top;

        console.log(scrollStart);

        var wScroll = $(this).scrollTop();

        console.log(wScroll);

        var scrollBottom = $(window).scrollTop() + $(window).height();

        console.log(scrollBottom);

        if (scrollBottom => scrollStart) {

        $('.kujoimgpos').css({
              'background-position' : '0 -'+(200 + ((wScroll - scrollStart) *0.2)) +'px'
        });
      }
    });

});

它的作用是抓住div和页面顶部之间的距离，并使div背景图像开始向上移动20％或我选择的任何值。它使用jqueries .scrollTop来启动等式，用这样的等式改变div的背景位置：

$('.kujoimgpos').css({
              'background-position' : '0 -'+(200 + ((wScroll - scrollStart) *.2)) +'px'
        });

现在，当我测试这个时，我使用* .2，因为我想要一个缓慢移动的图像。但我只是想看看它的速度是滚动速度的2到3倍。因此我将其更改为2，一旦你这样做，它只会在div的顶部点击页面顶部时才开始滚动，因为if语句我们检查scrollTop是否大于offset（）。顶部，只有在这样做之后我才意识到我不应该使用offset（）。top因为我想在图像第一次触及页面底部时开始滚动，好吧将scrollTop更改为ScrollBottom ..哈哈，好吧scrollBottom将使用我们不想要的文档实际底部的距离，因此我们创建一个名为scrollBottom var scrollBottom = $(window).scrollTop() + $(window).height();的新var并在if语句中使用它，但仍然在我们的背景位置方程中使用wScroll，因为它是只是一种方法，一旦我们到达屏幕上的那个位置，将（1 *（无论你想要的是什么））px添加到图像背景位置。

所以似乎通过改变我们控制图像滚动速度的值，它也会影响滚动的开始时间。有什么想法吗？

这里也是所有相关的html和css：

<section id="acts" class="acts">
<div class="container-fluid" >
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2 kujopad" id="heightid">
                <h1>The Kujo Kings</h1>
                <p>

                    Known for their Ska/Punk anthems and high energy packed out shows, this 20 something band has built a strong Australian-wide following since forming in 2010.  The six-piece band are dedicated to entertaining fans with their catchy and humorous tunes, with dangerous amounts of energy, dancing, costumes and gratuitous fun being a consistent feature of their shows, the Kujo Kings are an act not to be missed!

                    </p>
        </div>
        <div id="imgstart" class="col-sm-4 kujoimgpos">
        <! the image is here >
        </div>
    </div>
</div>
</section>

HM

.kujoimgpos {
    margin-left: 150px;
    background-image: url('/img/kujokings.jpg');
    background-size: auto 700px;
    background-repeat: no-repeat;
    position: relative;
}

Answer 1

好吧所以我通过将if语句从它的内容更改为：

来解决问题

if (wScroll >= scrollStart) {

        $('.kujoimgpos').css({
              'background-position' : '0 -'+(60 + ((wScroll - scrollStart) *.2)) +'px'
        });
      }

实际上将scrollStart var更改为减去窗口高度，所以一切都匹配。

var scrollStart = $('#imgstart').offset().top - $(window).height();

Answer 2

“胖箭”（=>）是ES 2015 function shorthand syntax。您的if声明可以重写为以下内容：

if (function(scrollBottom) { return scrollStart }) {
  // ...
}

...显然，它总是评估为true，因为所有函数基本上都是对象。

正如其他答案中所指出的，如果你想进行“大于或等于”比较，你需要使用>=。

javascript忽略if方程元素大于1的语句？

2 个答案: