페이지에서 컨텐츠 위치 탐색

html 코드:

 <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");
});

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

HTML 5 효과 ~ 3D 큐 브 회전

일단 이 필터 의 최종 효 과 를 감상 해 보도 록 하 겠 습 니 다. 이 효 과 는 Css 3 의 새로운 특성 을 결합 하여 만 든 것 입 니 다. 주로 hover, transform, @ keyframe 속성 을...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

페이지에서 컨텐츠 위치 탐색

좋은 웹페이지 즐겨찾기