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); });
  • 相关阅读:
    构建之法阅读笔记
    10个操作数的随机四则运算测试
    poj 1742 Coins (动态规划,背包问题)
    第二周进度报告
    蓝桥杯 2015年省赛最后一题 生命之树(树形dp)
    蓝桥杯 ALGO-108 最大体积 (动态规划)
    蓝桥杯 algo——6 安慰奶牛 (最小生成树)
    蓝桥杯 algo_5 最短路 (bellman,SPFA)
    蓝桥杯 ALGO-4 结点选择 (树形动态规划)
    软件工程——评价搜狗拼音输入法
  • 原文地址:https://www.cnblogs.com/pengchengzhong/p/6781955.html
Copyright © 2011-2022 走看看