jQuery to achieve sliding stairs effect

This article shares the specific code of jQuery to achieve the sliding staircase effect for your reference. The specific content is as follows

Idea : When the mouse scrolls, the page changes accordingly, and when the module is clicked, the effect of pointing to the right place is achieved

Code Implementation

1.html and css code

<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</span></li>
    <li>3F<span>Mobile Phone</span></li>
    <li>4F<span>Home 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>Service</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;">Makeup</li>
    <li style="background: #667;">Mobile phone</li>
    <li style="background: #558;">Home 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, import a jQuery file and write the jQuery code

<script>
    $(function(){

 //Define the judgment var flag = true
 
  $(window).scroll(function(){

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

   //Point to where to hit$("#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 clicking, 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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: