解決済み：上から上にスクロールするときにカルーセル/スライダを一時停止し、上にスクロールしたときに最初からやり直すにはどうすればよいですか？

Question

私はページ上のような効果を達成したいと思います：http://www.jovaconstruction.com/

私のクライアントが望んでいたように私は、「ぼかし」効果を達成し、ぼやけた画像の不透明度は、スクロールによって変化するが、私はそのカルーセル/スライダーが一時停止します達成することはできません。私はいくつかの方法を試しましたが、どれも解決には至りませんでした。

サイトの簡単な説明：スライダ/カルーセルを2つのセクションに渡ってバックグラウンドで作成しました。例のページのように効果があります。

マイコード：

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-スライダー

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 -opacity

//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

エリックあなたの助けをありがとう。

私の問題に対する私の解決策は少し異なりました。

私はブートストラップ機能とjquery機能を使用しました。

最初に私のカルーセルをブートストラップ標準に再構築します。 第二私はjqueryのscrollTopスプライト（）関数を使用：

$document.scroll(function() { 
    if ($document.scrollTop() > 5) { 
    $('.carousel').carousel('pause'); 
    } else { 
    $('.carousel').carousel(); 
    } 
}); 

ソリューションは、私が望んでいたまさにです。

Answer 2

ウィンドウのオフセットを計算する方法はありますか？ ：

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