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

1.图片.

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

2. 代码:

html

     <div class="all ">
 
         <!-- 头部: 背景 -->
         <div class="all_head">
 
         </div>
 
         <div class="all_logout" onclick="logout()">
             退出
         </div>
 
         <!-- 包裹: 左边 和 右边 -->
         <div class="all_wrap floatfix">
 
             <!-- 左边 -->
             <div class="all_left">
 
                 <!-- 头部_头像区域 -->
                 <div class="all_top floatfix">
                     <img class="all_top_img" src="<?php echo $user['userImg']; ?>" alt="用户头像">
                     <div class="all_top_msg">
                         <span class="all_top_msg_name"> <?php echo $user['userName']; ?></span>
                         <span class="caret" style="border-bottom-color: #fff; border-top-color: #fff; margin-left: 10px;"></span>
                     </div>
 
                 </div>
 
                 <!-- 导航 -->
 
                 <ul class="ul_1">
 
                 <?php foreach ($nav as $k1 => $model1): ?>
                     <li class="li_1">
                         <div class="li_1_content "  onclick="getFirst(this, <?php echo $model1->id; ?>)">
 
                         <?php if ($model1->hasStudy == 0): ?>
                             <div class="li_1_text "><?php echo $model1->title; ?></div>
                         <?php else: ?>
                             <div class="li_1_text hasStudy"><?php echo $model1->title; ?></div>
                         <?php endif ?>
 
                         </div>
 
                         <?php if (count($model1->child) > 0): ?>
                         <ul class="ul_2 hide">
 
                             <?php foreach ($model1->child as $k2 => $model2): ?>
                             <li class="li_2" >
                                 <div class="li_2_content" onclick="getSecond(this, <?php echo $model2->id; ?>, event)">
                                     <div class="li_2_text">
                                         <?php echo $model2->title; ?>
                                     </div>
                                 </div>
 
                                 <?php if (count($model2->child) > 0): ?>
                                 <ul class="ul_3 hide">
 
                                     <?php foreach ($model2->child as $k3 => $model3): ?>
                                     <li class="li_3"  >
                                         <div class="li_3_content" onclick="getThird(this, <?php echo $model3->id; ?>, event)">
                                             <div class="li_3_text"><?php echo $model3->title; ?></div>
                                         </div>
                                     </li>
                                     <?php endforeach ?>
 
                                 </ul>
                                 <?php endif ?>
 
                             </li>
                             <?php endforeach ?>
 
                         </ul>
                         <?php endif ?>
 
                     </li>
                 <?php endforeach ?>
 
                 </ul>
 
             </div>
 
             <!-- 右边 -->
             <div class="all_right">
 
                 <div class="all_right_blue">
 
                     <div class="all_right_bg all_right_bg_img">
 
                     </div>
 
                 </div>
 
             </div>
         </div>
 
     </div>

js:

             //滚动----固定效果
             var maxScrollTop = 342;
             var pflag = false;
             $(window).scroll( maxScrollTop, function(event){
                 var $me = $(this);
                 console.log($me.scrollTop());
                 // console.log($(".all_right_blue").offset());
                 // console.log($(".all_right_blue").position());
 
                 if( $me.scrollTop() > event.data ){
 
                     if(pflag == false){
                         $(".all_left").css("position", "fixed");
                         $(".all_left").css("top", "0px");
                         flag = true;
                         // console.log('1111');
 
                     }
 
                     // $me.scrollTop( 0 );
                 }else{
                     $(".all_left").css("position", "static");
                     pflag == false;
                     // $("#xtest").css("top", $me.scrollTop());
                 }
             } );

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

3 .效果:

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

向上滚动: 左侧恢复