滚动浏览父DIV时修复元素

Question

如果是在视图中间，我想修复右侧的“图标修复”div。但它应该只有在视图到达红色框结束时才能修复。

目前我正在使用Bootstrap和jQuery - 你会如何解决这个问题？

Answer 1

我看了你发布的图片，并在jsBin上创建了这个类似的演示。不应该需要整个插件。 JQuery和一些CSS应该解决这个问题。

http://jsbin.com/libatajure/edit?css,js,output

代码的内容在这里：

// Check if element totally above or totally below viewport
if (top + height - followHeight < pos || top > pos + window_height) {
  return;
}

var offset = parseInt($(window).scrollTop() - top);

if (offset > 0) {
$follow.css('transform', 'translateY('+ offset +'px)');
}

查看蓝色元素仅在其父元素可见时滚动，并在父元素在视口外时停止？我希望这有帮助！

Answer 2

我相信this正是您所寻找的，页面上也有源代码。

Answer 3

这是你要找的？ http://jsfiddle.net/leojavier/gbuLykdj/1/

<div class="div-a"></div>

<div class="div-b">
    <div class="fixed-element"></div>
</div>

<div class="div-c"></div>

JS

$(window).on('scroll', function(){
    if($(window).scrollTop() >= $('.div-a').height() && !$('.fixed-element').hasClass('fixed')) {
        $('.fixed-element').addClass('fixed');
    } 
    else if($(window).scrollTop() < $('.div-a').height() && $('.fixed-element').hasClass('fixed')){
        $('.fixed-element').removeClass('fixed');
        $('.fixed-element').removeClass('abs');
    }
})

CSS

html,body{
    width:100%;
    height:100%;
}

.div-a{
    background:red;
    width:100%;
    height:100%;
}
.div-b{
    background:blue;
    width:100%;
    height:100%;
    position:relative;
}
.div-c{
    background:purple;
    width:100%;
    height:100%;
}

.fixed-element{
    background:#FFF;
    background:#CCC;
    width:100px;
    height:100px;
    float:right;
    margin-right:20px;
    margin-top:20px;
}
.fixed {
    position:fixed;
    right:0;
    top:0;
}
.abs {
    position:absolute;
    right:0;
    bottom:0;
}

http://jsfiddle.net/leojavier/gbuLykdj/1/