新闻中心

HTML实现左侧世界杯2022买球软件内容可滚动右侧列表固定布局_思问的博客

作者:世界杯2022买球软件 发布时间:2022-09-08 17:40

世界杯2022买球软件一、前言:最近在项目中,遇到一个页面布局问题,说是布局,其实就是实现一个新闻页面的交互问题;功能比较常见,就是左侧的内容部分可以滚动,右侧的列表固定定位。这个功能比较常见,目前已实现,就是布局+JS配合实现该效果;先上图,大概就是下图右侧列表随滚动条固定在右侧,左侧可以滚动的效果,当滚动条接近底部时,为了使右侧列表不覆盖底部,需要用js处理,设置右侧列表的bottom值网页滚动新闻,具体请看代码。

HTML实现左侧世界杯2022买球软件内容可滚动右侧列表固定布局_思问的博客

二, 代码部分,由于是公司项目网页滚动新闻,没有把源代码拿过来,在这里我写了一个demo,来测试该功能,页面结构是一样的。

世界杯2022买球软件html结构

class="sec-wrapper">
class="head-top">页面头部
class="main-section"> <div class="div-wrapper clearfix"> <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 class="list-right"> <div class="box-fixed">新闻列表div> div> div>

HTML实现左侧世界杯2022买球软件内容可滚动右侧列表固定布局_思问的博客

class="foot">页面底部

世界杯2022买球软件小节:关于htmL页面结构,就是头部、底部、内容部分,结构比较清晰;我们的内容部分的左侧是class类为cont-left的div元素,右侧是class类为list-right的div元素;我们需要固定的就是list-right的div元素。

css样式

<style type="text/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;
        }

世界杯2022买球软件HTML实现左侧世界杯2022买球软件内容可滚动右侧列表固定布局_思问的博客

.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:100px; line-height:100px; text-align:center; font-size:16px;

HTML实现左侧世界杯2022买球软件内容可滚动右侧列表固定布局_思问的博客

color:#fff; background:#528FEA; margin-top:-100px; }
.div-wrapper{ width:1200px; margin:0 auto; background:#F4F6F9; position:relative; } .cont-left{ width:900px; float:left; margin-right:10px; } .list-right{ float:left; } .cont-item{ width:100%; height:200px; background:tan;

HTML实现左侧世界杯2022买球软件内容可滚动右侧列表固定布局_思问的博客

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; }
style>

小节:关于css样式设置,是有一定的技巧的,对于内容部分实现左右两栏布局,方式有多种,这里需要用到浮动,这样我们就不用再设置left-right容器的left值,省去很多麻烦,然后给内容的父容器设置position:relative; 滚动到一定高度时,我们给box-fixed容器添加tab_fix类固定,当滚动条接近底部时网页滚动新闻,为了不让固定的列表容器覆盖底部,可以使用绝对定位网页滚动新闻,设置bottom值网页滚动新闻,就是添加tab_fix_bottom类。

HTML实现左侧世界杯2022买球软件内容可滚动右侧列表固定布局_思问的博客

js部分

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">script>
<script type="text/javascript">
    $(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");
              }
          });
    });
script>

世界杯2022买球软件三、总结:功能很常见,主要目的是做个笔记。当然,相信实现方法不止一种,如果大家遇到更好的方法,可以一起学习。

上一篇:如何正世界杯2022买球软件确客观地评价湖南卫视

下一篇:没有了