javascript - 从顶部滚动时如何暂停轮播/ slider 并在滚动到顶部时重新开始？

Question

我想实现页面上的效果:http://www.jovaconstruction.com/

我实现了“模糊”效果，正如我的客户所希望的那样，模糊图像的不透明度随着滚动而变化，但我无法实现轮播/ slider 会暂停。我尝试了几种方法，但没有一种接近解决方案。

网站的快速描述:我在两个部分上制作了 slider /旋转木马作为背景，它应该具有与示例页面相同的效果。

我的代码:

html

<div class="slider">
        <div id="bg1" class="background activeslide"><div id="bg1blur" class="bluredbg"></div></div>
        <div id="bg2" class="background"><div id="bg2blur" class="bluredbg"></div></div>
        <div id="bg3" class="background"><div id="bg3blur" class="bluredbg"></div></div>
        <div id="bg4" class="background"><div id="bg4blur" class="bluredbg"></div></div>
    </div>

CSS

.background{
opacity:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#bg1{
background: url('../img/bg1.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg2{
background: url('../img/bg2.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg3{
background: url('../img/bg3.jpg');
position:fixed;
width:100%;
z-index:-10;
height:100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#bg4{
background: url('../img/bg4.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg1blur{
background: url('../img/bg1blur.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg2blur{
background: url('../img/bg2blur.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg3blur{
background: url('../img/bg3blur.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
#bg4blur{
background: url('../img/bg4blur.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:fixed;
width:100%;
z-index:-10;
height:100%;
}
.activeslide{
opacity:1 !important;
}
.bluredbg{
opacity:0;
}

js slider

var displayTime = 5000;                                 //Time between    animations
var currIdx = 0;                                        //Index for loops
var $slides = $('.slider .background');                         //Html elements to cycle between

function animateBG() {
currIdx = (currIdx < 3) ? currIdx + 1 : 0;                              //We  set counter
setTimeout(function() {                                                     //Timeout for repetition
    $slides.removeClass('activeslide');                                 //We   remove class .activeslide from last element
    $slides.eq(currIdx).addClass('activeslide').fadeIn(0, function() {  //We add class to new element. 0 is trans. time(in this case css doc is doing this)
        animateBG();
    });
}, displayTime)                                                         //Displaytime is var = here we set last of animation of displaying 1 slide

}

js - 不透明度

//script for chng.opacitynclass .activeslide while scrolling down.
$(window).on('scroll', function () {
    var pixs = $(document).scrollTop()
    pixsiv = pixs / 500;
    $(".activeslide>.bluredbg").css({"opacity":+pixsiv})
});

希望一切都清楚。做了什么，我想要什么。

谢谢。

Answer 1

如何计算窗口的偏移量？ :

window.scrollBy(100, 100);

if (window.pageXOffset !== undefined) { // All browsers, except IE9 and earlier
    alert(window.pageXOffset + window.pageYOffset);
} else { // IE9 and earlier
    alert(document.documentElement.scrollLeft + document.documentElement.scrollTop);
}