jquery Realizes Sliding Stair Effect

2021-11-24 00:37:34
OfStack

In this paper, we share the specific code of jquery to achieve the effect of sliding stairs for your reference, the specific contents are as follows

Thoughts: When the mouse scrolls, the page follows the changes. When clicking on the module, it can achieve the effect of which to play

Implementation of code

1. html and css codes


<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   body,ul,li{
    padding: 0;
    margin: 0;
   }
   li{
    list-style: none;
   }
   #floorNav{
    display: none;
    position: fixed;
    top: 100px;
    left: 50px;
    width: 32px;
    border: 1px solid #CECECE;
   }
   #floorNav li{
    position: relative;
    width: 32px;
    height: 32px;
    border-bottom: 1px solid #CECECE;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
   }
   
   #floorNav span{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    background: red;
    color: white;
   }
   
   #floorNav li:hover span,#floorNav li.hover span{
    display: block;
   }
   
   #floorNav li:last-child{
    background: red;
    color: white;
    border-bottom: none;
   }
   #header,#footer{
    width: 1000px;
    height: 1000px;
    background: darkgoldenrod;
    margin: 0 auto;
   }
   #content{
    
   }
   #content li{
    width:1000px;
    height: 600px;
    margin: 0 auto;
    font-size: 40px;
    text-align: center;
    line-height: 600px;
   }
  </style>
 </head>

 <body>
  <div id="floorNav">
   <ul>
    <li>1F<span> Clothing </span></li>
    <li>2F<span> Beauty makeup </span></li>
    <li>3F<span> Mobile phone </span></li>
    <li>4F<span> Household appliances </span></li>
    <li>5F<span> Digital </span></li>
    <li>6F<span> Sports </span></li>
    <li>7F<span> Home </span></li>
    <li>8F<span> Mother and baby </span></li>
    <li>9F<span> Food </span></li>
    <li>10F<span> Books </span></li>
    <li>11F<span> Services </span></li>
    <li>TOP</li>
   </ul>
  </div>
  <div id="header"></div>
  <div id="content">
   <ul>
    <li style="background: #8B0000;"> Clothing </li>
    <li style="background: #123;"> Beauty makeup </li>
    <li style="background: #667;"> Mobile phone </li>
    <li style="background: #558;"> Household appliances </li>
    <li style="background: #900;"> Digital </li>
    <li style="background: #456;"> Sports </li>
    <li style="background: #789;"> Home </li>
    <li style="background: #234;"> Mother and baby </li>
    <li style="background: #567;"> Food </li>
    <li style="background: #887;"> Books </li>
    <li style="background: #980;"> Services </li>
   </ul>
 </div>
 <div id="footer"></div>
</body>

2. Next, introduce an jQuery file and then write jQuery code


<script>
    $(function(){

 // Definition discrimination 
 var flag = true
 
  $(window).scroll(function(){

   if(flag){
   // Show hidden stairs 
   var scrollTop=$(this).scrollTop();
   if(scrollTop>=500){
    $("#floorNav").fadeIn()
   } else{
    $("#floorNav").fadeOut();
   }

   // Hit where you point 
   $("#content li").each(function(){
    if(scrollTop>=$(this).offset().top-$(this).outerHeight()/2){
     var index = $(this).index();
     $("#floorNav li").eq(index).addClass("hover")
     .siblings().removeClass("hover")
    }

   })
   }
  })
 
  // When clicked, the scroll bar scrolls to the corresponding position 
  $("#floorNav li:not(:last)").click(function(){
   flag=false
   var index = $(this).index();
   $("html ,body").animate({"scrollTop":$("#content li").eq(index).offset().top},500)
  
   flag=true
   $(this).addClass("hover").siblings().removeClass("hover")
  })
 
   $("#floorNav li:last").click(function(){
    flag = false;
    $("html,body").animate({"scrollTop":0},200,function(){
     flag = true
    })
   })
 })

</script>