html 左侧内容上下滚动 右侧列表固定的问题

https://blog.csdn.net/yshx1990/article/details/79262087

参考以上博客做右侧列表固定的时候发生了一些问题,由于项目需要用到bootstrap框架,所以在bootstrap框架下做了个demo测试了下。css、js部分没有变化,全部拷贝过来的。唯独html里加入了bootstrap的栅格,row col-md-x这些,然后就发生了问题。见下图:



图片说明



刚开始下滑的时候没问题,直到接近页面底部时,右侧列表就没了。正常情况下应该是这样(没使用bootstrap的时候),和底部对齐,很完美。



图片说明



但现在变成了下图这样,侧边栏没了。也不知道是为啥,有大佬懂的吗?



图片说明



下面是我仿照他的做的,js、css部分没有变化,就是html那边,加了几个栅格,为啥就崩了呢?有解决方法吗?

css如下:

        html,body{
            width:100%;
            height:100%;
        }
        html,body,header,footer,div,section{
            padding:0;
            margin:0;
        }
        .clearfix:after{
            content:'';
            display:block;
            clear:both;
            height:0;
            visibility:hidden;
        }
        .clearfix{
            zoom:1;
        }
        .sec-wrapper{
            min-height:100%;
        }
        .head-top{
            width:100%;
            height:100px;
            line-height:100px;
            text-align:center;
            font-size:16px;
            color:#fff;
            background:#E74445;
        }
        .main-section{
            padding-bottom:100px;
            margin:20px auto;
        }
        .foot{
            width:100%;
            height:2000px;
            line-height:100px;
            text-align:center;
            font-size:16px;
            color:#fff;
            background:#528FEA;
            margin-top:-100px;
        }
        .div-wrapper{
            width:1200px;
            margin:0 auto;
            background:#F4F6F9;
            position:relative;
        }
        .cont-left{
            width:900px;

            margin-right:10px;
        }
        .list-right{

        }
        .cont-item{
            width:100%;
            height:200px;
            background:tan;
            margin-top:10px;
        }
        .box-fixed{
            width:290px;
            height:600px;
            padding-top:20px;
            background-color:#89A1C5;
            position:relative;
            top:0px;
            text-align:center;
            color:#fff;
        }
        .tab_fix_bottom {
            position: absolute;
            bottom: 0px;
            top: auto;
        }
        .tab_fix{
            position:fixed;
        }

html如下:

<section class="sec-wrapper">   
    <header class="head-top">页面头部</header>
    <section class="main-section">  
        <div class="div-wrapper clearfix">
            <div class="row">
                <div class="col-md-9">
                    <div class="cont-left">
                        <div class="cont-item"></div>
                        <div class="cont-item"></div>
                        <div class="cont-item"></div>
                        <div class="cont-item"></div>
                        <div class="cont-item"></div>
                        <div class="cont-item"></div>
                        <div class="cont-item"></div>
                        <div class="cont-item"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="list-right">
                        <div class="box-fixed">新闻列表</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
<footer class="foot">页面底部</footer>

js如下:

        $(function(){
            var fheight = $('.foot').height() +30; // 获取底部及底部上方边距的总高度
            var boxfixed = $('.box-fixed');  // 获取固定容器的jquery对象
            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop();  // 获取滚动条滚动的高度
                var contLeftTop = $('.cont-left').offset().top +20; // 右侧列表相对于文档的高度
                var scrollBottom = $(document).height() - $(window).scrollTop() - boxfixed.height();
                if (scrollTop >= contLeftTop) {
                  if (scrollBottom > fheight) {  // 滚动条距离底部的距离大于fheight,添加tab_fix类,否则添加tab_fix_bottom类
                    boxfixed.removeClass("tab_fix_bottom").addClass('tab_fix');
                  } else {
                    boxfixed.removeClass('tab_fix').addClass("tab_fix_bottom");
                  }
                } else if (scrollTop < contLeftTop) {
                  boxfixed.removeClass('tab_fix').removeClass("tab_fix_bottom");
                }
            });
      });

1个回答

.box-fixed的position里把relative改为fixed,再加上z-index: 1; 试试,注意指定top和left

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Vue: 左侧固定,右侧 overflow:auto 的页面,怎么在路由跳转时右侧回到它的顶部?
-
html 两块div,左侧div固定宽度,右侧div宽度如何填满右侧剩余部分
-
点击左侧树的节点,右侧展示文章列表页面
-
左侧menu,右侧画面内容怎么实现,iframe不好用,高度是固定的。。。
-
网站左右布局,点击左侧节点,右侧显示相应内容
-
asp.net 点击右侧菜单,左侧表格里的数据根据点击的菜单节点显示相应的内容,菜单不需要动态的
-
表格如何将左侧固定,右侧增加X滚动条
-
vue 左侧菜单出现重复菜单问题怎么解决? 有遇到过这样的问题吗?
-
asp.net中怎样实现点击左侧菜单,右侧显示相应内容?
-
Qt左侧QtreeWidgetItem与右侧QTabWideget如何联动
-
Ext中左侧tree与右侧grid,grid分页问题。
-
SlidingMenu怎么才能从左侧滑出到最右侧
-
mac外接屏幕,如何固定dock在主屏幕的左侧?
-
使用jquery做一个左侧导航栏固定,点击导航栏右侧内容改变的效果
-
双listview的通信和检测位置
-
jquery ui中的demo,主页怎么做到左侧不变,右侧刷新的呢,感觉比sitemesh还要爽
-
js固定边栏滚动怎么弄
-
在网页中如何实现分布滚动
-
求教大神,点击li给出样式,页面刷新保留li的样式,再点击其他li上一个li样式恢复,这个改变
-
如何MFC单文档程序点击左侧树形控件,在右侧的视图窗口中添加对话框
-
程序员真是太太太太太有趣了!!!
网络上虽然已经有了很多关于程序员的话题,但大部分人对这个群体还是很陌生。我们在谈论程序员的时候,究竟该聊些什么呢?各位程序员大佬们,请让我听到你们的声音!不管你是前端开发...
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
史上最全的后端技术大全,你都了解哪些技术呢?
| 导语工欲善其事,必先利其器;士欲宣其义,必先读其书。后台开发作为互联网技术领域的掌上明珠,一直都是开发者们的追逐的高峰。本文将从后台开发所涉及到的技术术语出发,基于...
吃人的那些 Java 名词:对象、引用、堆、栈
作为一个有着 8 年 Java 编程经验的 IT 老兵,说起来很惭愧,我被 Java 当中的四五个名词一直困扰着:**对象、引用、堆、栈、堆栈**(栈可同堆栈,因此是四个名词,也是五个名词)。每次我看到这几个名词,都隐隐约约觉得自己在被一只无形的大口慢慢地吞噬,只剩下满地的衣服碎屑(为什么不是骨头,因为骨头也好吃)。
我花了一夜用数据结构给女朋友写个H5走迷宫游戏
起因 又到深夜了,我按照以往在csdn和公众号写着数据结构!这占用了我大量的时间!我的超越妹妹严重缺乏陪伴而 怨气满满! 而女朋友时常埋怨,认为数据结构这么抽象难懂的东西没啥作用,常会问道:天天写这玩意,有啥作用。而我答道:能干事情多了,比如写个迷宫小游戏啥的! 当我码完字准备睡觉时:写不好别睡觉! 分析 如果用数据结构与算法造出东西来呢? ...
团队中的 Git 实践
在 2005 年的某一天,Linux 之父 Linus Torvalds 发布了他的又一个里程碑作品——Git。它的出现改变了软件开发流程,大大地提高了开发流畅度!直到现...
不识 Pandas,纵是老手也枉然?
作者 |周志鹏 责编 | 郭 芮 这段时间和一些做数据分析的同学闲聊,我发现数据分析技能入门阶段存在一个普遍性的问题,很多凭着兴趣入坑的同学,都能够很快熟悉Python基础语法,然后不约而同的一头扎进《利用Python进行数据分析》这本经典之中,硬着头皮啃完之后,好像自己什么都会了一点,然而实际操作起来既不知从何操起,又漏洞百出。 至于原因嘛,理解不够,实践不够是两条老牌的拦路...
接班马云的为何是张勇?
上海人、职业经理人、CFO 背景,集齐马云三大不喜欢的张勇怎么就成了阿里接班人? 作者|王琳 本文经授权转载自燃财经(ID:rancaijing) 9月10日,张勇转正了,他由阿里巴巴董事局候任主席正式成为阿里巴巴董事局主席,这也意味着阿里巴巴将正式开启“逍遥子时代”。 从2015年接任CEO开始,张勇已经将阿里巴巴股价拉升了超过200%。但和马云强大的个人光环比,张勇显得尤其...
程序员终极面试指南!
身为技术人,如何拿下自己心仪的 offer? 作者|James Bedford 译者 |苏本如,责编 | 屠敏 出品 | CSDN(ID:CSDNnews) 以下为译文: 介绍 最近半年以来,我一直在积极指导开发人员,包括新手和有经验的开发人员。我发现,所有开发人员最关心的问题之一通常都是寻找工作。 如果你已经被录用了,很有可能你经历了一个令人精疲力竭的过程。...
我在快手认识了 4 位工程师,看到了快速发展的公司和员工如何彼此成就!
作者 | 胡巍巍 出品 | CSDN(ID:CSDNnews) 从西二旗地铁站B口出来,步行700多米可以看到一个工业建筑风格的院子。这个独立的院子和后厂村各大互联网公司的高楼林立有些不同。 院子里有7栋6层高的楼,几栋楼之间打通,可以从A栋自由穿行到F栋。这里就是快手总部。这个园区可以容纳6000多名员工,目前40%以上是研发人员。 这些研发人员维护着快手这款日活超过2亿的ap...
让程序员崩溃的瞬间(非程序员勿入)
今天给大家带来点快乐,程序员才能看懂。 来源:https://zhuanlan.zhihu.com/p/47066521 1. 公司实习生找 Bug 2.在调试时,将断点设置在错误的位置 3.当我有一个很棒的调试想法时 4.偶然间看到自己多年前写的代码 5.当我第一次启动我的单元测试时 ...
分享一个 pycharm 专业版的永久使用方法
刚开始接触Python,首先要解决的就是Python开发环境的搭建。 目前比较好用的Python开发工具是PyCharm,他有社区办和专业版两个版本,但是社区版支持有限,我们既然想好好学python,那肯定得用专业的不是。 但他专业版要么只能试用一个月,要么就是 $ , 身为猿军中的一员怎么能让他们这些小伎俩阻碍了我们继续前进的步伐呢?所以我在度娘的引导下,一步步实现了PyCharm的永久使用(虽...
用Python分析2000款避孕套,得出这些有趣的结论
到现在为止,我们的淘宝教程已经写到了第四篇,前三篇分别是: 第一篇:Python模拟登录淘宝,详细讲解如何使用requests库登录淘宝pc端。 第二篇:淘宝自动登录2.0,新增Cookies序列化,教大家如何将cookies保存起来。 第三篇:Python爬取淘宝商品避孕套,教大家如何爬取淘宝pc端商品信息。 今天,我们来看看淘宝系列的第四篇 我们在上一篇的时候已经将淘宝数据爬取下来了,...
无需安装,仅需 1 条指令,秒实现内网穿透的神器,你有用过吗?
什么是 ServeoServeo 是一个免费的内网穿透服务,Serveo 可以将本地计算机暴露在互联网上,官方声称其为 Ngrok 的绝佳替代品。Serveo 其最大优点...
作为曾经的 Web 开发“王者”,jQuery 的传奇怎么续写?
作为世界上使用最广泛的JavaScript库,jQuery曾经帮助过一代开发人员创建了适用于每种浏览器的网站,可以说,Web开发之所以能有今天,jQuery可谓功不可没。但是随着新的库、框架和范例的不断涌现,jQuery作为Web开发首选工具的地位已经逐渐不保......任何事物都有其自身发展的兴盛与衰落,短期内jQuery并不会消失,但是对于其来说,又该如何维稳逆袭呢? 作者|Da...
重磅:硬核前端面试开源项目汇总(进大厂必备)
复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累!”开源项目https://github.com/InterviewMap/CS-Interview...
为什么平头哥做芯片如此迅猛?
作者 | 胡巍巍 发自杭州云栖大会责编 | 唐小引出品 | CSDN(ID:CSDNnews)2018年10月31日,阿里旗下的平头哥半导体有限公司成立。如今,平头哥成立...
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
技术人员要拿百万年薪,必须要经历这9个段位
很多人都问,技术人员如何成长,每个阶段又是怎样的,如何才能走出当前的迷茫,实现自我的突破。所以我结合我自己10多年的从业经验,总结了技术人员成长的9个段位,希望对大家的职...
多线程编程是后台开发人员的基本功
这里先给大家分享一个小故事:在我刚开始参加工作的那年,公司安排我开发一款即时通讯软件(IM,类似于 QQ 聊天软件),在这之前我心里也知道如果多线程操作一个整型值是要加锁...
相关热词 c# mysql插入 c# sha256 加密 c#窗体上的叉添加事件 c#打印图片文件 c#後台調前台js c#控制台美化 c# 标记 浮点型 c#获取当前的农历日期 c# 构造函数重载 c# 页面功能注释

相似问题

8
移动端 h5 (rem px 的不同写法造成视觉上的偏差,求解决 )
2
页面怎样才能配合鼠标做循环滚动呢
0
使用VDI远程桌面开发,六键鼠标的左侧翻页功能键失效,求解决办法!
1
商城横向分类导航,最后一级框架样式问题
1
vue使用bscroll左右菜单联动,左侧栏目无法跟随右边滑动切换active
1
Vue: 左侧固定,右侧 overflow:auto 的页面,怎么在路由跳转时右侧回到它的顶部?
1
idea左侧菜单如何设置行距
3
使用QT5.9自定义控件时,为什么在QtCreator左侧里找不到自定义的控件,而QtDesigner里可以看到?
1
请问怎么在html页面点击一个地址位置 Bing地图自动显示该位置的地图
2
如何在网页中点击一个菜单后在本页面中一片区域显示对应页面?
2
如何解决ViewPager+Fragment+GridView实现无限滑动时页面切换的卡顿问题?
4
【想问关于JSP的基础和环境编译问题】
2
vue 左侧菜单展开隐藏重新渲染
2
easyUI左侧导航联动tab没反应?哪位大神帮忙看一下!
2
asp.net中怎样实现点击左侧菜单,右侧显示相应内容?
1
Javafx中如何设计一个界面滑动进入?
1
如何在div中设置jqgrid的宽高自适应?
1
jquery实现小米主页左侧导航栏切换时出现问题,大神们帮忙看一下指点一下啦
1
无法执行赋值,因为左侧和右侧的元素数目不同。MATLAB
1
MATLAB无法执行赋值,因为左侧和右侧的元素数目不同。