如何停止比窗口高度更长的滚动div？

#container（位置：相对）里面我有2个div：两者都是50％宽，＃第一个非常高（位置：相对），＃第二个至少是2000px高。如何停止比窗口高度更长的滚动div？

有没有什么办法让#second停止滚动时底部到达，但继续滚动其他内容？如果没有制作额外的父母div，它会很棒。小提琴：实现这个https://jsfiddle.net/Moor/ha4zybpb/

#container{ 
 
    position:relative; 
 
} 
 
#first{ 
 
    width:50%; 
 
    background:#333; 
 
    height:10000px; 
 
} 
 
#second{ 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
    width:50%; 
 
    height:2000px; 
 
    background:limegreen; 
 
}

<div id="container"> 
 
    <div id="first"></div> 
 
    <div id="second"></div> 
 
</div>

来源

2017-04-11 Demuri Celidze

你开到JS或jQuery的解决方案？ – sol

一种方法是使用position:sticky - 但请务必检查browser compatability它符合您的要求。

*{margin:0;padding:0;} 
 
#first{ 
 
    background:#333; 
 
    display:inline-block; 
 
    height:10000px; 
 
    vertical-align:bottom; 
 
    width:50%; 
 
} 
 
#second{ 
 
    background:linear-gradient(0deg,#f00,#090); 
 
    bottom:0; 
 
    display:inline-block; 
 
    height:2000px; 
 
    position:sticky; 
 
    vertical-align:bottom; 
 
    width:50%; 
 
}

<div id="container"><div id="first"></div><div id="second"></div></div>

来源

2017-04-11 13:47:59 Shaggy

Holy Coyier，好像我完全失去了时间，我从未听说过他们增加了这个职位。我会测试它，但似乎现在不够安全使用它http://caniuse.com/#search=position%3Asticky –

这不是一个完整的答案，但它可能会帮助你对你的方式 - 检查滚动位置和视口的高度，并把它比作第二个元素的高度 -

检查这个小提琴为我的例子。用jQuery做

updated fiddle

$(document).ready(function() { 
console.log("ready!"); 
var secondHeight = $('#second').height(); 
console.log(secondHeight); 

var stopper = 0; 

$(window).scroll(function (event) { 
var scroll = $(window).scrollTop(); 
var viewportHeight = $(window).height(); 
    // Do something 
    console.log(scroll+viewportHeight); 



    if(secondHeight <= scroll+viewportHeight) { 
    console.log('stop it here'); 
    stopper = 1; 
    } else { 
    stopper = 0; 
    } 
    console.log(stopper); 

    if(stopper == 1) { 
    $('#second').css('position','fixed'); 
    console.log('making it fixed'); 
    } else { 
    $('#second').css('position','absolute'); 
    console.log('making it absolute'); 
    } 


    }); 


});

来源

2017-04-11 13:54:38 Stender

谢谢，这是一个有趣的解决方案，将试用它。 –

一个jQuery的 “粘性” 的解决方案..

https://jsfiddle.net/cusjptLr/4/

var sh = $('#second').height(); 
$(window).scroll(function(){ 
    if (($(window).scrollTop() + $(window).innerHeight()) >= sh) { 
    $('#second').addClass("sticky"); 
    } 
}); 

#second.sticky { 
    position: fixed; 
    bottom: 0; 
    top: initial; 
}

来源

2017-04-11 14:01:44 ZimSystem

希望避免使用脚本，但似乎是唯一的方法。谢谢！ –

如何停止比窗口高度更长的滚动div？

回答

相关问题