0

将 div 放置在 div 内并在外部 div 的滚动上应用 css 'position': 'fixed' 到内部 div 并且当我开始滚动外部 div 时，内部 div 只是出现在外部 div 上方，具有自己的宽度和高度

我怎样才能避免 div 溢出？

我的示例代码：

<html>
<body>
   <div id="masterdiv" style="width:50%;height:25%;margin:0 auto;overflow: scroll;"> 
       <div class="scroller_anchor" style="height:0px; margin:0; padding:0;"></div>
       <div class="scroller" style="background:#FFF; border:1px solid #CCC; margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;">This is the scrolSuspendisse potenti. Donec dapibus tlable bar</div>
       <div class="test_content">Quisque sollicitudin elit vitae</div>
   </div>    
</body>
</html>

脚本 

$('#masterdiv').scroll(function(e) {
    var scroller_anchor = $(".scroller_anchor").offset().top;    
    if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed') 
    {  
         $('.scroller').css({            
             'position': 'absolute',
             'overflow': 'hidden',
             'top': '0px'
         });       
         $('.scroller_anchor').css('height', '50px');
    } else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative') 
    {  
         $('.scroller_anchor').css('height', '0px');        
         $('.scroller').css({
              'background': '#FFF',
              'border': '1px solid #CCC',
              'overflow': 'hidden',
              'position': 'absolute'
         });
    }
});
4

1 回答 1

0

因为您使内部 div 的位置固定，所以 div 将保持在屏幕上的位置，与外部 div 的位置无关。

于 2013-09-16T04:28:02.437 回答