楼层导航
楼层导航
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script src="../jquery-3.4.1.min.js">script>
<style>
*{ margin: 0; padding:0; list-style: none;}
.box{ width: 100%; height: 800px; background: olivedrab;}
#item1,#item2,#item3,#item4,#item5{ width: 1000px; margin: 0 auto; height: 500px; background: orangered;}
#item2{ background: palegoldenrod; height: 600px;}
#item3{ background:palevioletred; height: 700px;}
#item4{ background:#00f; height: 600px;}
#item5{ background: #0f0; height: 800px;}
.nav{ position:fixed; top:100px; left: 50%; margin-left: 500px; width: 50px; display:none;}
.nav>li{ height: 40px; text-align: center; border: 1px solid #000}
.active{ background: orchid}
style>
head>
<body>
<div class="box">div>
<ul class="nav">
<li class=""><a href="#item1">1Fa>li>
<li><a href="#item2">2Fa>li>
<li><a href="#item3">3Fa>li>
<li><a href="#item4">4Fa>li>
<li><a href="#item5">5Fa>li>
ul>
<div class="floor" id="item1">
<h1>1Fh1>
div>
<div class="floor" id="item2">
<h1>2Fh1>
div>
<div class="floor" id="item3">
<h1>3Fh1>
div>
<div class="floor" id="item4">
<h1>4Fh1>
div>
<div class="floor" id="item5">
<h1>5Fh1>
div>
<script>
$(function(){
scrl()
function scrl(){
$(document).scroll(function(){
var top = $('#item1').offset().top
if($(document).scrollTop()<top){
$('.nav').hide()
}
// if($(document).scrollTop()>=$('#item1').offset().top){
// $('ul li').eq(0).addClass('active').siblings().removeClass()
// $('.nav').show()
// }
// if($(document).scrollTop()>=$('#item2').offset().top){
// $('ul li').eq(1).addClass('active').siblings().removeClass()
// }
// if($(document).scrollTop()>=$('#item3').offset().top){
// $('ul li').eq(2).addClass('active').siblings().removeClass()
// }
// if($(document).scrollTop()>=$('#item4').offset().top){
// $('ul li').eq(3).addClass('active').siblings().removeClass()
// }
// if($(document).scrollTop()>=$('#item5').offset().top){
// $('ul li').eq(4).addClass('active').siblings().removeClass()
// }
$('ul li').each(function(x){
if($(document).scrollTop()>=$('div.floor').eq(x).offset().top){
// if($(document).scrollTop()>=$($(this).find('a').attr('href')).offset().top){
$(this).addClass('active').siblings().removeClass()
$('.nav').show()
}
})
})
}
$('ul li').each(function(){
$(this).click(function(){
var scrTop = $($(this).find('a').attr('href')).offset().top
$('html').animate({scrollTop:scrTop},1000,function(){
scrl()
})
})
})
})
script>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
* {padding: 0;margin: 0;}
.other {height: 600px;}
div {width: 1200px;margin: 0 auto;height: 1000px;border: 1px solid #000;}
div>img {width: 200px;height: 100px;}
.daohang {position: fixed;top: 50%;left: 50%;margin-left: 600px;margin-top: -50px;width: 50px;height: 100px;display: none;}
.daohang>p {width: 100%;height: 20px;line-height: 20px;text-align: center;background-color: #999;border-bottom: 1px solid #fff;box-sizing: border-box;}
.daohang>.active {background-color: #f12;}
style>
<script src="../jquery-3.4.1.min.js">script>
head>
<body>
<div class="daohang">
<p>1p>
<p>2p>
<p>3p>
<p>4p>
<p style="border-bottom: none">5p>
div>
<div class="other">div>
<div class="floor">
<img src="images/7.jpg" alt="">
<img src="images/7.jpg" alt="">
<img src="images/7.jpg" alt="">
<img src="images/7.jpg" alt="">
div>
<div class="floor">
<img src="images/8.jpg" alt="">
<img src="images/8.jpg" alt="">
<img src="images/8.jpg" alt="">
<img src="images/8.jpg" alt="">
div>
<div class="floor">
<img src="images/9.jpg" alt="">
<img src="images/9.jpg" alt="">
<img src="images/9.jpg" alt="">
<img src="images/9.jpg" alt="">
div>
<div class="floor">
<img src="images/10.jpg" alt="">
<img src="images/10.jpg" alt="">
<img src="images/10.jpg" alt="">
<img src="images/10.jpg" alt="">
div>
<div class="floor">
<img src="images/11.jpg" alt="">
<img src="images/11.jpg" alt="">
<img src="images/11.jpg" alt="">
<img src="images/11.jpg" alt="">
div>
<script>
$(function(){
function floor(){
$(window).scroll(function(){
console.log($(window).scrollTop())
// if($(window).scrollTop()>300){
// $('.daohang').show()
// }else{
// $('.daohang').hide()
// }
// if($(window).scrollTop()>=$('.floor').eq(0).offset().top){
// $('.daohang').show()
// }
if($(window).scrollTop()<$('.floor').eq(0).offset().top){
$('.daohang').hide()
}
$('.daohang>p').each(function(x){
if($(window).scrollTop()>=$('.floor').eq(x).offset().top){
$('.daohang').show()
$(this).addClass('active').siblings().removeClass()
}
})
// $('.floor').each(function(i,v){
// if($(window).scrollTop()>=$(v).offset().top){
// $('.daohang').show()
// $('.daohang>p').eq(i).addClass('active').siblings().removeClass()
// }
// })
})
}
floor()
$('.daohang>p').each(function(x){
$(this).click(function(){
// $(window).scrollTop((x*500)+600)
// $(window).scrollTop((x*500)+$('.floor').eq(0).offset().top)
// $(window).scrollTop(($('.floor').eq(x).offset().top))
$('html').animate({scrollTop:$('.floor').eq(x).offset().top},1000)
})
})
})
script>
body>
html>