javascript - 固定了导航栏,下方有iframe,iframe内容较长。然后滚动后上方的导航栏就会挡住Iframe的一部份,怎么解决呢?
天蓬老师
天蓬老师 2017-04-11 09:52:39
[JavaScript讨论组]

内容代码

<header id="nav">
    <p>
        <a href="#" class="left_float"><img src="#" class="logo"></img></a>
        <a href="#" class="nava left_float navcurrent"><span>栏目管理</span></a>
    </p>
</header>
<p 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>
</p>
<!-- 右侧内容结束 -->
<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' });  
        });  
    });
天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(1)
迷茫

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号