コンテンツのページ内の位置ナビゲーション
22637 ワード
htmlコード:
プロジェクトcssコード(htmlにリセットcssファイルが導入されています):
jsコード:
<body>
<div id="j_subject">
<div class="nav">navdiv>
<div class="box1 cont-box"> div>
<div class="box2 cont-box"> div>
<div class="box3 cont-box"> div>
<div class="box4 cont-box"> div>
<div class="box5 cont-box"> div>
<div class="box6"> div>
<div class="j_nav" id="j_nav">
<ul>
<li class="nav-list"><p class="p1"> p>li>
<li class="nav-list"><p class="p1"> p>li>
<li class="nav-list"><p class="p1"> p>li>
<li class="nav-list"><p class="p1"> p>li>
<li class="nav-list"><p class="p1"> p>li>
<li class="li-ju back clearfix">
<div class="arrow fl songti">
<em>▲em>
<i>▲i>
div>
<p class="p1 fl">TOPp>
li>
ul>
div>
div>
body>プロジェクトcssコード(htmlにリセットcssファイルが導入されています):
.nav{background: blue;height: 500px;width: 100%;font-size: 24px;padding-left: 200px;}
.box1{height: 500px;padding-left: 200px;background: #fff;font-size: 24px;}
.box2{height: 500px;padding-left: 200px;background: pink;font-size: 24px;}
.box3{height: 500px;padding-left: 200px;background: red;font-size: 24px;}
.box4{height: 500px;padding-left: 200px;background: #fff;font-size: 24px;}
.box5{height: 500px;padding-left: 200px;background: green;font-size: 24px;}
.box6{height: 500px;padding-left: 200px;background: black;font-size: 24px;}
.j_nav{width: 130px;height: 245px;border-radius: 10px;border:1px solid #fff;background: #fff;position: absolute;right: 20px;top: 350px;box-shadow: 3px 2px 2px rgba(0,126,196,0.75);}
.j_nav li{height: 40px;line-height: 40px;text-align: center;cursor:pointer;}
.j_nav li .p1 {display: inline-block;width: 100%;color: #007ed4;font-size: 18px;}
.j_nav li .p1:hover{color: #ff1975;}
.j_nav .on .p1 {color: #ff1975;}
.j_nav .li-ju{background-image: none;}
.j_nav .li-ju:hover em{color:#ff1975;}
.j_nav .li-ju:hover i{color:#fff;}
.nav-on {position: fixed;right: 20px;top:11%;}
.j_nav .arrow {font-size: 16px;margin-left: 35px;width: 16px;margin-right: 5px;}
.j_nav .arrow em{color:#007ed4;}
.j_nav .arrow i{color:#fff;position: relative;top: -36px;}
.j_nav .back .p1 {width: 20px;}jsコード:
$(function(){
var subject =$('#j_subject');
var navigation = $('#j_nav'); //
var nav = subject.find('.nav-list'); //
var conBox = subject.find('.cont-box'); //
var navTop = navigation.offset().top; //
var sw = screen.width; //
nav.on('click',function(){
var t = $(this);
var ts = t.siblings('li');
t.addClass('on');
ts.removeClass('on');
var tindex = t.index();
var section = conBox.eq(tindex);
var stop = section.offset().top;
$('body,html').animate({scrollTop:stop},800);
});
$('.back').on('click',function(){
$('body,html').animate({scrollTop:0},800);
});
$(window).scroll(function () {
var w = $(window).scrollTop(); //
if (_util.check.isIE6) {
return;
};
if (w >= 300) {
navigationion.addClass('nav-on');
} else {
navigation.removeClass('nav-on');
}
$('.cont-box').each(function(a,b) {
var ctop = $(this).offset().top;
if (w>ctop-20) {
navigation.find('li').removeClass('on');
navigation.find('li').eq(a).addClass('on');
}
});
}).trigger("scroll");
});