zoukankan      html  css  js  c++  java
  • iframe子元素相对于父页面滚动条固定(iframe无滚动条,iframe固定高度有滚动条,两种情况)

    一、当iframe自适应高度,无滚动条时候:

    例如这样:

    //随着父页面滚动条滚动定位“#qn-quc”他的位置固定在顶部
    $(parent.window).scroll(function() {
        var scrollheight = parseInt($(parent.window).scrollTop());
        console.log(parseInt($(parent.window).scrollTop()))
        if (scrollheight >= 300) {
            $("#qn-quc").css({
                "position": "absolute",
                "top": parseInt($(parent.window).scrollTop()) - 120 + "px"
    
            });
        } else {
            document.getElementById("qn-quc").style = " ";
        }
    });

    或者这样:

     //题目按钮固定顶部
     $(window.parent.document).scroll(function() {
         var scrollheight = parseInt($(window.parent.document).scrollTop());
         if (scrollheight >= 300) {
             $("#qn-quc").css({
                 "position": "absolute",
                 "top": parseInt($(window.parent.document).scrollTop()) - 120 + "px"
    
             });
         } else {
             document.getElementById("qn-quc").style = " ";
         }
     });

    二、当iframe页面存在滚动条就简单很多了

    例如这样:

     var ie6 = document.all;
        var dv = $('#qn-quc'), 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 });
            }
            else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
            } else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
            });
    //监听window滚动条位置

    $(window).scroll(function () { var st = $(this).scrollTop(); console.log(st); });
  • 相关阅读:
    django admin site配置(二)
    MyEclipse中无法将SVN检出来的项目部署到tomcat中
    遍历目录树,清理编译目录
    axis2学习, ant 构建axis2 ws
    [置顶] 2013 Multi-University Training Contest 8
    Cocos2d-x 关于在iOS平台真机测试的一些注意
    SharePoint 2013的100个新功能之社交
    路由共享上网原理
    red ant
    nginx正向代理访问百度地图API
  • 原文地址:https://www.cnblogs.com/pengchengzhong/p/6781955.html
Copyright © 2011-2022 走看看