Question

在div中放置div并在外部div的滚动上应用css 'position'：'固定'到内部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'
         });
    }
});

Answer 1

因为你固定了内部div位置，所以div将保持在屏幕上的位置，无论外部div在哪里都无关紧要。

Div css位置和溢出

1 个答案: