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

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 .效果:

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

向上滚动: 左侧恢复