JS implements positioning navigation bar
This time I will bring you JS to implement the positioning navigation bar. What are the precautions for JS to implement the positioning navigation bar? The following is a practical case, let's take a look.
The complete code is as follows:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.nav{width:100%;position:absolute;top:150px;}
.nav ul{width:1200px;height:50px;margin:0 auto;background:#ccc;}
.nav ul li{width:150px;height:50px;line-height:50px;text-align:center;list-style:none;float:left;cursor:pointer;}
.nav ul li:hover{background:#666;}
.nav ul li a{color:#000;font-size:18px;text-decoration:none;}
.nav .active{background:#666;}
.cont{width:1200px;height:4500px;margin:0 auto;}
.cont ol{width:1200px;height:4500px;margin:0 auto;}
.cont ol li{width:1200px;height:500px;list-style:none;}
.cont ol li p{color:#000;font-size:48px;}
</style>
</head>
<body>
<p style="height:200px;width:100%;"></p>
<p class="nav">
<ul>
<li class="active">page1</li>
<li>page2</li>
<li>page3</li>
<li>page4</li>
<li>page5</li>
<li>page6</li>
<li>page7</li>
<li>page8</li>
</ul>
</p>
<p class="cont">
<ol>
<li style="background:#aaa"><p>page1</p></li>
<li style="background:#999"><p>page2</p></li>
<li style="background:#666"><p>page3</p></li>
<li style="background:#333"><p>page4</p></li>
<li style="background:#bbb"><p>page5</p></li>
<li style="background:#aaa"><p>page6</p></li>
<li style="background:#ccc"><p>page7</p></li>
<li style="background:#000"><p>page8</p></li>
</ol>
</p>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(".nav ul li").click(function(){
var index=$(this).index();
var i=150+index*501+'px'
$("html,body").animate({scrollTop:i},500)
})
$(window).scroll(function(){
if($(window).scrollTop()>150){
$(".nav").css({"position":"fixed","top":"0px"})
}
else{
$(".nav").css({"position":"absolute","top":"150px"})
}
for(var x=0;x<8;x++){
var i=150+x*500
if($(window).scrollTop()>i && $(window).scrollTop()<i+500){
$(".nav ul li").eq(x).addClass("active").siblings().removeClass("active")}
}
})
</script>
</body>
</html>How to create paging effect with jquery
Why jQuery cannot trigger binding events when adding elements Processing
How to add and remove menus on the left and right sides with JS
How to encapsulate the animate.css code with jQuery
The above is the detailed content of JS implements positioning navigation bar. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to locate Apple wireless earphones if they are lost_How to locate Apple wireless earphones
Mar 23, 2024 am 08:21 AM
1. First, we open the [Search] App on the mobile phone and select the device in the list on the device interface. 2. Then, you can check the location and click on the route to navigate there.
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
How to locate the other party's mobile phone location on Amap - How to locate the other party's mobile phone location on Amap
Apr 01, 2024 pm 02:11 PM
1. Click to enter the Amap map software on your mobile phone. 2. Click My in the lower right corner. 3. Click to enter the family map. 4. Click Create My Family Map. 5. After the creation is successful, an invitation code will appear and can be shared with another mobile phone.
Amap launches upgraded version of driving ETA service: real-time analysis of current road conditions and more accurate estimated arrival time
Apr 30, 2024 am 08:37 AM
According to news from this site on April 29, Amap officially announced the launch of an upgraded version of driving ETA (Note from this site: ETA is the estimated time of arrival, which refers to the estimated time it will take for the user to depart from the current moment and follow a given route to the destination. ) service, which aims to help users make more accurate route planning duration and traffic condition estimates, and assist users in making travel decisions. This map application is the latest upgraded Amap App. It introduces the "ultra-large-scale graph convolutional neural network model", which can better capture and learn traffic flow patterns, support urban road networks and highway systems, and can Accurately depict the spatiotemporal dynamic changes of traffic conditions. In addition, the new version of the map further integrates the iTransformer time series prediction model to support real-time analysis.
How to change the location information and how to modify the address
Mar 12, 2024 pm 09:52 PM
We all know very clearly that Taku APP is a very reliable chat and social platform. Now it allows everyone to make friends online. Some of the forms of making friends here mainly allow people to make friends by location. Oh, it's so simple and direct. After all, it can automatically locate your current location information for you, and better match you with some friends in the same city who are close to each other, so that everyone can chat more easily and feel special. Happy, many times, in order to get to know more friends in other places, everyone has the idea of modifying their address, but they don’t know how to modify their location information, which is very difficult. troubled, so the editor of this site also collected some specific
How to quickly find the location of a Huawei phone after it is lost?
Mar 24, 2024 am 08:48 AM
In today's society, mobile phones have become an indispensable part of our lives. As a well-known smartphone brand, Huawei mobile phones are deeply loved by users. However, with the popularity of mobile phones and the increase in frequency of use, mobile phones are often lost. Once our phone is lost, we tend to feel anxious and confused. So, if you unfortunately lose your Huawei phone, how can you quickly find its location? Step 1: Use the mobile phone positioning function. Huawei mobile phones have built-in powerful positioning functions. Users can use the "Security" option in the mobile phone settings.
iPhone typing 'Oil found' triggers location? Can privacy still be guaranteed?
Apr 26, 2024 pm 01:28 PM
Recently, many users on the Internet said that when using Apple phones to search or comment on topics related to "discovering oil," the device will automatically turn on positioning. It is suspected that Apple phones are collecting and sending location information to monitor users. Will typing "Oil found" on iPhone trigger location? Can Apple's privacy be guaranteed in this way? Obviously, this is a misunderstanding! Apple customer service said that the positioning function is turned on by default, and any operation may trigger status updates, rather than being limited to sending specific text. But this statement is not entirely comprehensive. Generally, the iPhone rarely triggers the positioning function, unless you are searching for something, or the APP mechanism setting is related. When the user enters certain characters, the APP will automatically enable the positioning function in the background. Why can this topic
How to get HTTP status code in JavaScript the easy way
Jan 05, 2024 pm 01:37 PM
Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service
