3
我有一個DIV（一個容器元素）。如何阻止DIV大於視口滾動？
它是我想淡入和淡出的一些元素（取決於用戶滾動的方向）。這沒有問題。
查看演示的嵌入式代碼片段。
問題
注意演示中的衰落黑色區域;我想保持這一點，同時淡化它（通過滾動一段距離）。
在淡入和淡出這些元素的過程中，我想讓父容器（DIV）不會移動（垂直），直到淡入或淡出完成。這部分對我來說是一個問題。
更新2017年11月3日
我已經更新了我的代碼，這似乎在Chrome中（運行好例子使它堅持使用負marginTop拉了div（向上滾動時）和積極top推下來div在如邊緣或Firefox（向下滾動時），但是在運行速度非常「糟糕」（scroll -event解僱滾動使得落後之後）。
我已經試過
- 我試過使用
position: sticky。這首先使用position: relative，然後使用position: fixed，所以它不完全符合我的要求。 - 我嘗試過使用'position：fixed'。當然，父容器DIV不會粘到視口上。但是，因爲它的高度大於視口的高度，所以它不能按我想要的方式工作，例如，如果用戶滾動到大容器高度的50％，則使用'position：fixed'使此scrollTop丟失。
- 我試過'position：fixed'與'scroll'事件和marginTop CSS屬性（也只是'top'CSS屬性）結合使用。我得到了奇怪的結果。此外，「滾動」事件總是在用戶滾動一定數量的像素後執行。所以如果這樣做的話，人們可能會得到一個'laggy'的經驗。
- 我已經搜索了jQuery插件等，但他們也依賴'位置：固定'，因此也是有限的。
- 我試過ScrollMagic，同時使用GreenSock的TimelineMax執行補間。例如淡入淡出和淡入淡出的一個補間，以及再一次或者再次頂部補償「位置：絕對」和「位置：相對」的滾動距離的一個補間。
- 我試圖抓住mousewheel事件並滾動programmaticaly然後（所以我可以選擇不滾動）。這當然是一個選擇。但我真的很喜歡一個滾動條。移動體驗滯後，因爲當人們進行編程滾動時，不能使用例如'雙擊'手勢。
- 我已經嘗試了很多東西和很多變化的東西。
代碼（嵌入式段） - 更新2017年11月3日
代碼在瀏覽器不屬於瀏覽器（糟糕！）
var $window = $(window);
// Element which needs to fade in and out.
var $fadingblack = $("#fadingblack");
// Parent element of fading element.
var $scrollcontainer = $("#scrollcontainer");
// Last scrollTop-value.
var lastScrollTop = $window.scrollTop();
var lockForFade = false;
$window.on('scroll',
// Function which is to be called after user scrolls.
function() {
// Current scrollTop value.
var currentScrollTop = $window.scrollTop();
// Y-coordinate of element which needs to fade.
var scrollTopStart = $fadingblack.position().top;
// Y-coordinate of end of element which needs to fade.
var scrollTopEndDown = scrollTopStart + $fadingblack.height();
var scrollTopEndUp = scrollTopStart - $fadingblack.height();
// Has element which needs to fade scrolled into view.
// Does the fading itself.
function doFade($el, $parent, lastScrollTop, currentScrollTop, scrollTopStart, scrollTopEnd) {
// Curent opacity for fade; determined by scroll position.
//var currentOpacity = (currentScrollTop - scrollTopStart)/(scrollTopEnd - scrollTopStart);
var currentOpacity;
// Temporary variables for scrollTop.
var theTop;
var fadeCompleted;
function undoPushAndScroll() {
// Save the amount of pixels the parent element has been pushed down.
var savedTop = $parent.position().top;
// Then reset this 'push amount'.
$parent.css("top", 0);
// And scroll the pushed down amount of pixels back upwards.
$window.scrollTop(currentScrollTop - savedTop);
currentScrollTop -= savedTop;
}
function undoPullAndScroll() {
// Save the amount of pixels the parent element has been pulled up.
var savedTop = parseFloat($parent.css('marginTop'));
// Then reset this 'pull amount'.
$parent.css("marginTop", 0);
// And scroll the pulled up amount of pixels back downwards.
$window.scrollTop(currentScrollTop - savedTop);
currentScrollTop -= savedTop;
}
function undoPullAndDoPush() {
var savedMarginTop = parseFloat($parent.css('marginTop'));
$parent.css('marginTop', 0);
$window.scrollTop(currentScrollTop - savedMarginTop);
currentScrollTop -= savedMarginTop;
// Determine difference between start of fade (Y-value) and current scrollTop (Y-value).
var theTop = Math.abs(scrollTopStart - currentScrollTop); // + savedMarginTop;
// Push the parent element down that same difference.
$parent.css("top", theTop);
}
function undoPushAndDoPull() {
// Save the amount of pixels the parent element has been pushed down.
var savedTop = $parent.position().top;
$parent.css('top', 0);
$window.scrollTop(currentScrollTop - savedTop);
currentScrollTop -= savedTop;
// User has scrolled up.
// Determine difference between start of fade (Y-value) and current scrollTop (Y-value).
var theTop = Math.abs(scrollTopStart - currentScrollTop);
// Pull the parent element up that same difference.
$parent.css("marginTop", -theTop);
}
if (lastScrollTop < currentScrollTop) {
// User has scrolled down.
undoPullAndDoPush();
//currentOpacity = Math.abs(currentScrollTop - scrollTopStart)/$el.height();
fadePercent = Math.abs(currentScrollTop + $parent.position().top - scrollTopStart)/$el.height();
currentOpacity = fadePercent;
// Fade to current opacity immediately.
$el.fadeTo(0, currentOpacity);
// Determine if fade has completed (must scroll at least the height of the fading element).
fadeCompleted = ($parent.position().top >= $el.height());
if (fadeCompleted) {
// Then immediately set opacity to 1.
$el.fadeTo(0, 1);
// Fade has completed.
undoPushAndScroll();
lockForFade = false;
}
} else if (lastScrollTop > currentScrollTop) {
// User has scrolled up.
undoPushAndDoPull();
fadePercent = Math.abs(currentScrollTop + parseFloat($parent.css('marginTop')) - scrollTopStart)/$el.height();
currentOpacity = 1 - fadePercent;
// Fade to current opacity immediately.
$el.fadeTo(0, currentOpacity);
// Determine if fade has completed (must scroll at least the height of the fading element).
fadeCompleted = (-parseFloat($parent.css('marginTop')) >= $el.height());
if (fadeCompleted) {
// Then immediately set opacity to 0.
$el.fadeTo(0, 0);
// Fade has completed.
undoPullAndScroll();
lockForFade = false;
}
}
}
if (lastScrollTop < currentScrollTop) {
// Scrolling down in fade area.
if (!lockForFade && currentScrollTop >= scrollTopStart && lastScrollTop < scrollTopStart) {
if (parseFloat($fadingblack.css('opacity')) < 1) {
lockForFade = true;
}
}
if (lockForFade) {
doFade(
$fadingblack,
$scrollcontainer,
lastScrollTop,
currentScrollTop,
scrollTopStart,
scrollTopEndDown);
}
} else if (lastScrollTop > currentScrollTop) {
// Scrolling up in fade area.
if (!lockForFade && currentScrollTop <= scrollTopStart && lastScrollTop > scrollTopStart) {
if (parseFloat($fadingblack.css('opacity')) > 0) {
lockForFade = true;
}
}
if (lockForFade) {
console.log('dofade up');
doFade(
$fadingblack,
$scrollcontainer,
lastScrollTop,
currentScrollTop,
scrollTopStart,
scrollTopEndUp);
}
}
// Save last scrollTop-value for next scroll-event-call.
lastScrollTop = $window.scrollTop();
});body {
background-color: whitesmoke;
}
#scrollcontainer {
position: absolute;
left: 0px;
top: 0px;
}
.red,
.blue,
.black {
position: relative;
width: 900px;
}
.red,
.blue {
height: 300px;
}
.black {
height: 600px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.black {
background-color: black;
}
#fadingblack {
opacity: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scrollcontainer">
<div class="red">BEGIN</div>
<div class="blue">Fading black area is ahead...</div>
<div id="fadingblack" class="black"> </div>
<div class="blue"> </div>
<div class="red"> </div>
<div class="blue">END</div>
</div>
所以，你要的「fadingblack」 DIV堅持，一旦它在視圖，然後通過褪色滾動，一旦它完成褪色，繼續把其他的div進入視野？ – Slime
@AmericanSlime是的，這正是我想要達到的。 – Wieger