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