左侧 随着页面滚动固定 fixed. scroll .scrollTop

Posted 2020-10-08 cb_za

 

1.图片.

 

要求:随着页面滚动 . 左侧应该顶着 浏览器顶部, 向上回滚, 就恢复原状.

 

 

2. 代码:

html

  1     <div class="all ">
  2 
  3         <!-- 头部: 背景 -->
  4         <div class="all_head">
  5 
  6         </div>
  7 
  8         <div class="all_logout" onclick="logout()">
  9             退出
 10         </div>
 11 
 12 
 13 
 14         <!-- 包裹: 左边 和 右边 -->
 15         <div class="all_wrap floatfix">
 16 
 17             <!-- 左边 -->
 18             <div class="all_left">
 19 
 20                 <!-- 头部_头像区域 -->
 21                 <div class="all_top floatfix">
 22                     <img class="all_top_img" src="<?php echo $user[\'userImg\']; ?>" alt="用户头像">
 23                     <div class="all_top_msg">
 24                         <span class="all_top_msg_name"> <?php echo $user[\'userName\']; ?></span>
 25                         <span class="caret" style="border-bottom-color: #fff; border-top-color: #fff; margin-left: 10px;"></span>
 26                     </div>
 27 
 28 
 29                 </div>
 30 
 31 
 32                 <!-- 导航 -->
 33 
 34 
 35                 <ul class="ul_1">
 36 
 37                 <?php foreach ($nav as $k1 => $model1): ?>
 38                     <li class="li_1">
 39                         <div class="li_1_content "  onclick="getFirst(this, <?php echo $model1->id; ?>)">
 40 
 41                         <?php if ($model1->hasStudy == 0): ?>
 42                             <div class="li_1_text "><?php echo $model1->title; ?></div>
 43                         <?php else: ?>
 44                             <div class="li_1_text hasStudy"><?php echo $model1->title; ?></div>
 45                         <?php endif ?>
 46 
 47                         </div>
 48 
 49                         <?php if (count($model1->child) > 0): ?>
 50                         <ul class="ul_2 hide">
 51 
 52                             <?php foreach ($model1->child as $k2 => $model2): ?>
 53                             <li class="li_2" >
 54                                 <div class="li_2_content" onclick="getSecond(this, <?php echo $model2->id; ?>, event)">
 55                                     <div class="li_2_text">
 56                                         <?php echo $model2->title; ?>
 57                                     </div>
 58                                 </div>
 59 
 60 
 61                                 <?php if (count($model2->child) > 0): ?>
 62                                 <ul class="ul_3 hide">
 63 
 64                                     <?php foreach ($model2->child as $k3 => $model3): ?>
 65                                     <li class="li_3"  >
 66                                         <div class="li_3_content" onclick="getThird(this, <?php echo $model3->id; ?>, event)">
 67                                             <div class="li_3_text"><?php echo $model3->title; ?></div>
 68                                         </div>
 69                                     </li>
 70                                     <?php endforeach ?>
 71 
 72 
 73                                 </ul>
 74                                 <?php endif ?>
 75 
 76                             </li>
 77                             <?php endforeach ?>
 78 
 79                         </ul>
 80                         <?php endif ?>
 81 
 82 
 83                     </li>
 84                 <?php endforeach ?>
 85 
 86 
 87                 </ul>
 88 
 89 
 90 
 91 
 92 
 93 
 94 
 95 
 96 
 97             </div>
 98 
 99             <!-- 右边 -->
100             <div class="all_right">
101 
102                 <div class="all_right_blue">
103 
104                     <div class="all_right_bg all_right_bg_img">
105 
106 
107 
108 
109 
110                     </div>
111 
112                 </div>
113 
114             </div>
115         </div>
116 
117 
118     </div>

 

 

js:

 1             //滚动----固定效果
 2             var maxScrollTop = 342;
 3             var pflag = false;
 4             $(window).scroll( maxScrollTop, function(event){
 5                 var $me = $(this);
 6                 console.log($me.scrollTop());
 7                 // console.log($(".all_right_blue").offset());
 8                 // console.log($(".all_right_blue").position());
 9 
10                 if( $me.scrollTop() > event.data ){
11 
12                     if(pflag == false){
13                         $(".all_left").css("position", "fixed");
14                         $(".all_left").css("top", "0px");
15                         flag = true;
16                         // console.log(\'1111\');
17 
18                     }
19 
20                     // $me.scrollTop( 0 );
21                 }else{
22                     $(".all_left").css("position", "static");
23                     pflag == false;
24                     // $("#xtest").css("top", $me.scrollTop());
25                 }
26             } );

 

1 <ul class="ul_1" style="max-height:600px; overflow:auto;">

 

 

3 .效果:

 

 向下滚动: 左边固定在顶部

 

 

 向上滚动: 左侧恢复