javascript - 固定了导航栏，下方有iframe,iframe内容较长。然后滚动后上方的导航栏就会挡住Iframe的一部份,怎么解决呢？

问题描述

问 题

内容代码

<header id="nav">
    <div>
        <a href="#" class="left_float"><img src="#" class="logo"></img></a>
        <a href="#" class="nava left_float navcurrent"><span>栏目管理</span></a>
    </div>
</header>
<div id="content" class="right_float">
    <iframe id="content-iframe" src="__ADMINDOMAIN__/index/addnav" frameborder="0" width="100%" height="100%" name="right_content" scrolling="auto" frameborder="0" scrolling="no"></iframe>
</div>
<!-- 右侧内容结束 -->
<bootstrapjs />
<script>
// 动态调整iframe的高度以适应不同高度的显示器
$('#content').height($(window).height());
$('#content').css('padding-bottom',50);
</script>

控制导航栏的js,都用了jq

$(function () {  
        var ie6 = /msie 6/i.test(navigator.userAgent)  
        , dv = $('header'), st;  
        dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离  
        $(window).scroll(function () {  
            st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);  
            if (st >= parseInt(dv.attr('otop'))) {  
                if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果  
                    dv.css({ position: 'absolute', top: st });  
                }  //其他浏览器则直接加上fixed属性
                else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });  
            } else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });  
        });  
    });

解决方案

没办法解决啊。你屏幕智能显示100行，你想让显示200行显然是不可能的。
那么问题来了，如果只是首屏的时候，你给iframe加个margin或者padding 导航的高度不就完事了么

这篇关于javascript - 固定了导航栏，下方有iframe,iframe内容较长。然后滚动后上方的导航栏就会挡住Iframe的一部份,怎么解决呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！