下拉加载 、 static、scroll

下拉加载 <! DOCTYPE html>

< html >

     < head >

          < meta charset = "UTF-8" >

          < title ></ title >

          < style type = "text/css" >

               * {

      margin : 0 px ;

      padding : 0 px ;

}

#header {

      position : fixed ;

      top : 0 px ;

      left : 0 px ;

      width : 100 % ;

      height : 50 px ;

      background : #FAA732 ;

      text-align : center;

      line-height : 50 px ;

      color : white;

      font-weight : bold ;

}

#main {

      position : absolute ;

      top : 50 px ;

      left : 0 px ;

      right : 0 px ;

      bottom : 51 px ;

      padding : 10 px ;

      overflow : auto ;

}

#main li {

      display : flex ;

      margin-bottom : 10 px ;

      padding : 10 px ;

      border-bottom : 1 px solid gray;

      border-radius : 4 px ;

      background : #EEE ;

}

#main li img {

      flex : 50 px 0 0 ;

      width : 50 px ;

      height : 50 px ;

      padding : 4 px ;

      border : 1 px solid green;

}

#main li span {

      padding-left : 4 px ;

      line-height : 24 px ;

}

#footer {

      display : flex ;

      position : fixed ;

      left : 0 px ;

      bottom : 0 px ;

      width : 100 % ;

      height : 50 px ;

      border-top : 1 px solid gray;

      background : #FAA732 ;

}

#footer div {

      flex : 1 ;

      text-align : center;

      line-height : 50 px ;

      color : white;

      font-weight : bold ;

      border-right : 1 px solid white;

}

#footer div : nth-child ( 4 ) {

      border : none ;

}

#footer .active {

      background : #0086FF ;

}

           </ style >

     </ head >

     < body >

     < header id = "header" >首 页</ header >

< section id = "main" >

    < ul id = "list_box" ></ ul >

</ section >

< footer id = "footer" >

    < div class = "active" >首页</ div >

    < div >商城</ div >

    < div >其他</ div >

    < div >我的</ div >

</ footer >

< script src = "js/jquery-1.8.3.min.js" ></ script >

          < script type = "text/javascript" >

              

var page = 1 , //分页码

    off_on = false , //分页开关(滚动加载方法 1 中用的)

    timers = null ; //定时器(滚动加载方法 2 中用的)

  function diu_Randomize ( b , e ){  

    if ( ! b && b != 0 || ! e){ return "?" ;}  

    return Math.floor( ( Math.random() * e ) + b );  

}

//加载数据

var LoadingDataFn = function () {

    var dom = '' ;

    for ( var i = 0 ; i < 20 ; i ++ ) {

        dom += '<li><img src=" http://b-ssl.duitang.com/uploads/item/201409/12/20140912132553_5Wcx3.jpeg"/ ><span>上滑列加载表内容上滑列加载表内容上滑列加载表内容上滑列加载表内容</span></li>' ;

    }

    $( '#list_box' ).append(dom);

    off_on = true ; //[重要]这是使用了 {滚动加载方法1}  时 用到的 ！！！[如果用  滚动加载方法1 时：off_on 在这里不设 true的话， 下次就没法加载了哦！]

};

//初始化， 第一次加载

$( document ). ready ( function () {

    LoadingDataFn();

});

//底部切换

$( document .body).on( 'click' , '#footer div' , function () {

    $( this ).addClass( 'active' ).siblings().removeClass( 'active' );

});

//滚动加载方法1

/*$('#main').scroll(function() {

    //当时滚动条离底部60px时开始加载下一页的内容

    if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {

        //这里用 [ off_on ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）

        if (off_on) {

              off_on = false;

              page++;

              console.log("第"+page+"页");

              LoadingDataFn();  //调用执行上面的加载方法

        }

    }

});*/

//滚动加载方法2（可用）

/*$('#main').scroll(function() {

    //当时滚动条离底部60px时开始加载下一页的内容

    if (($(this)[0].scrollTop + $(this).height() + 60) >= $(this)[0].scrollHeight) {

        clearTimeout(timers);

        //这里还可以用 [ 延时执行 ] 来控制是否加载 （这样就解决了 当上页的条件满足时，一下子加载多次的问题啦）

        timers = setTimeout(function() {

            page++;

            console.log("第" + page + "页");

            LoadingDataFn(); //调用执行上面的加载方法

        }, 300);

    }

});*/

//还可以基window窗口（body）来添加滚动事件, (因为布局不同,所以在这里没效果，因为[上面是基于body中的某个元素来添加滚动事的])

$( window ). scroll ( function () {

    //当时滚动条离底部60px时开始加载下一页的内容

    if (( parseInt( $( window ).height() + $( window ).scrollTop() + 60） ) >= $( document ).height()) {

        clearTimeout(timers);

        timers = setTimeout ( function () {

            page ++ ;

            console .log( "第" + page + "页" );

            LoadingDataFn();

        }, 300 );

    }

});

$( window ). scroll ( function () {

        var  $this = $( this ),

            scrollTop = $( this ).scrollTop(); //滚动高度 ;

        if (scrollTop >= "68" ) {

            $( ".xianshi" ). css ( 'display' , "block" );

        } else {

            $( ".xianshi" ). css ( 'display' , "none" );

        }

    });

滑动到快底部时吸到最底部，否则一直在屏幕最下面

< div class = "op-bott clearfix" style = " display : none ; " >

/*底部导航*/

.op-bott {

    width : 100 % ;

    background-color : #5E5757 ;

    color : #fff ;

    margin-top : 44 px ;

    position : fixed ;

    bottom : 0 ;

    width : 100 % ;

}

$( window ). scroll ( function (){

       if ($( window ).scrollTop() < 180 ){

        $( ".op-bott" ).hide();

        $( ".op-bott" ). css ( "margin-bottom" , "0" );

      } else {

        $( ".op-bott" ).show();

        $( ".op-bott" ). css ( "margin-bottom" , "0" );

      }

      

   });

   $( document ). scroll ( function () {

         var fT = parseInt($( '.pri-total' ).offset().top);// pri-total   上一个元素

           sT = parseInt($( document ).scrollTop() + $( window ).height()); //页面滚动的距离+可视窗口的距离

         fT = fT + 120 ; //+自身元素的高度

         if (sT >= fT) {

           $( '.op-bott' ). css ({

               'position' : 'static'

             })

        } else {

           $( '.op-bott' ). css ({

               'position' : 'fixed' ,

               'margin-bottom' : '0'

             })

        }

      })

           </ script >

     </ body >

</ html >

$( window ). scroll ( function (){

    var fohi = $( ".footer.over-hidden" ).offset().top - 500 ;

     var hijie = parseInt($( window ).height() + $( window ).scrollTop() + $( ".footer" ).height);

     var dohi = $( document ). height ()

     if (hijie >= dohi ) {

         $( '.other-left' ). css ( 'top' ,fohi);

      } else {

         let height = $( document ).scrollTop();

        $( '.other-left' ).show();

        $( '.other-left' ). css ( 'top' ,height);

      }

     

   });

if ($( '.catalog' ).hasClass( "active" )){

     var acor = parseInt($( '.catalog .active' ). offset().top - 200 );

   $( ".scroll_cont" ).animate({scrollTop : acor}, 1000 );

   }

var userCenter=parseInt($('#user_center').offset().top);

        $(window).scroll(function() {

            var  $this = $(this),

            scrollTop = $(this).scrollTop(); //滚动高度 ;

        if (scrollTop >= (userCenter-15)) {

//          $(".left_nav").addClass("left_nav_top");

            $(".left_nav").css("position","fixed");

            $(".left_nav").css("top","88px");

        } else {

//         $(".left_nav").removeClass("left_nav_top");

            $(".left_nav").css("position","absolute");

            $(".left_nav").css("top","0px");

        }

    });