jQuery to achieve sliding stairs effect

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:
  • JavaScript to achieve stair rolling special effects (jQuery implementation)
  • jQuery scroll monitoring to achieve the mall staircase navigation effect
  • jQuery imitates Jingdong Mall's staircase navigation positioning menu

<<:  Detailed tutorial on deploying Hadoop cluster using Docker

>>:  Summary of common Mysql DDL operations

Recommend

A look into tool-based websites: the definition of tool-based websites and typical case analysis (pictures and text)

When it comes to tool-type websites, we first hav...

How to use Volume to transfer files between host and Docker container

I have previously written an article about file t...

Implementation of setting fixed IP when starting docker container

Network type after docker installation [root@insu...

Tutorial on Installing Nginx-RTMP Streaming Server on Ubuntu 14

1. RTMP RTMP streaming protocol is a real-time au...

Execute the shell or program inside the Docker container on the host

In order to avoid repeatedly entering the Docker ...

mysql-8.0.15-winx64 decompression version installation tutorial and three ways to exit

1. Download from the official website and unzip h...

js implements form validation function

This article example shares the specific code of ...

Introduction and use of js observer mode

Table of contents I. Definition 2. Usage scenario...

Detailed steps to install MySQL on CentOS 7

In CentOS7, when we install MySQL, MariaDB will b...

4 ways to avoid duplicate insertion of data in Mysql

The most common way is to set a primary key or un...

Linux uses bond to implement dual network cards to bind a single IP sample code

In order to provide high availability of the netw...

Solve the problem of spring boot + jar packaging deployment tomcat 404 error

1. Spring boot does not support jsp jar package, ...

React implements the principle analysis of the three stages of loading, loading, completion, loading failure

Recently I wrote in my blog that in the project l...

Some "pitfalls" of MySQL database upgrade

For commercial databases, database upgrade is a h...

JavaScript Closures Explained

Table of contents 1. What is a closure? 2. The ro...