위치 지정 및 탐색 효과를 달성하기 위한 jQuery 정보

小云云
풀어 주다: 2017-12-21 09:16:26
원래의
1600명이 탐색했습니다.

이 글에서는 주로 jQuery를 기반으로 한 위치 지정 및 탐색 위치 효과를 자세히 소개하고, Android Jiugongge 사진 표시에 대한 특정 코드를 공유합니다. 관심 있는 친구들이 모두 참고할 수 있기를 바랍니다.

스크롤 막대가 콘텐츠 영역으로 스크롤되면 측면 탐색 막대가 화면에 배치되고 이동을 멈추고 탐색 막대를 클릭하여 콘텐츠 위치로 이동합니다.


<!DOCTYPE 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">
  <style>
    *{
      padding: 0;
      margin: 0;

    }
    .left{
      float: left;
      padding: 0 0 328px 0;
    }
    .left p{
      width: 800px;
      height: 300px;
      line-height: 300px;
      text-align: center;
      font-size: 30px;
      background: gray;
      margin: 10px 0;
    }
    .nav{
      position: absolute;
      right:20px;
      top: 20px;
    }
    .nav p{
      width: 100px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background: pink;
      margin: 10px 0;
      cursor: pointer;
    }
    .bottom{
      overflow: hidden;
      width: 100%;
      position: relative;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <img style="width:100%" src="o_1bsmo1kpn1hp61bm0176i1bk618uo9.jpg" alt="">
  <p class="bottom">
    <p class="left">
      <p class="one leftp" id="one">
        一
      </p>
      <p class="conOne leftp" id="two">
          二 
      </p>
      <p class="leftp" id="three ">
        三
      </p>
      <p class="leftp" id="four">
        四
      </p>
    </p>
    <p class="nav">
      <p class="one navp">one</p>
      <p class="two navp">two</p>
      <p class="three navp">three</p>
      <p class="four navp">four</p>
    </p>
  </p>
  <script src="jquery.js"></script>
  <script>
    $(window).scroll(function(e){
      console.log($(window).scrollTop());
      if ($(window).scrollTop() >$(&#39;#one&#39;).offset().top) {
        $(&#39;.nav&#39;).css({&#39;position&#39;:&#39;fixed&#39;});
      console.log(&#39;ss&#39;);
      } else{
        $(&#39;.nav&#39;).css({&#39;position&#39;:&#39;absolute&#39;});
      }
    })
    $(&#39;.nav p&#39;).click(function(){
      var i = $(&#39;.navp&#39;).index(this);
      var x = $(&#39;.leftp&#39;).eq(i).offset().top;
      $(&#39;html, body&#39;).animate({scrollTop:x+&#39;px&#39;},500);
    })
  </script>
</body>
</html>
로그인 후 복사

관련 권장 사항:

Fullpage .js 고정 네비게이션 바 - 포지셔닝 네비게이션 바_javascript 기술 구현

백엔드 포지셔닝 - 클라우드에서 포지셔닝 및 네비게이션 기능을 구현하려면 PHP 또는 Java를 사용해야 합니까?

jQuery를 사용하여 고정 탐색 모음 효과 얻기

위 내용은 위치 지정 및 탐색 효과를 달성하기 위한 jQuery 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!