>웹 프론트엔드 >JS 튜토리얼 >jQuery를 통해 페이지의 탐색 모음을 수정하는 방법

jQuery를 통해 페이지의 탐색 모음을 수정하는 방법

清浅
清浅원래의
2018-11-23 17:55:273444검색

오늘은 페이지의 탐색 표시줄을 수정하는 방법에 대한 사례를 공유하겠습니다. 이는 특정 참조 값이 있으며 모든 사람의 학습에 도움이 되기를 바랍니다.

네비게이션 바를 만들 때 레이아웃에 익숙한 html과 CSS를 사용하는 것 외에도 jQuery에서 scrollTop 및 scrollLeft 지식을 사용해야 합니다. 이들은 주로 수직 스크롤 바의 위치를 ​​설정하거나 가져오는 데 사용됩니다. 페이지가 말려지는 높이 내비게이션 바의 위치를 ​​수정했으며, 이는 기사에서 자세히 공유됩니다.

scrollTop

일치하는 요소 스크롤 막대의 세로 위치를 반환하거나 설정합니다.

$(selector).scrollTop(offset)

offset: 스크롤 막대 상단을 기준으로 오프셋을 픽셀 단위로 지정합니다. 쓸 수도 있고 쓸 수도 없습니다.

예: 스크롤되는 페이지의 높이를 가져옵니다.

$(window).scrollTop();

scrollLeft

일치하는 요소의 스크롤 막대의 수평 위치입니다.

가로 위치는 왼쪽에서 스크롤한 픽셀 수를 의미하며,

스크롤 막대가 가장 왼쪽에 있을 때 위치는 0입니다.

$(selector).scrollLeft(position)

위치: 쓸 수 있거나 쓸 수 없는 새 위치를 픽셀 단위로 지정합니다.

스크롤 막대의 가로 위치는 왼쪽에서 스크롤되는 픽셀 수를 나타냅니다. 스크롤 막대가 가장 왼쪽에 있을 때 위치는 0입니다.

예: 말려지는 페이지의 너비를 가져옵니다

$(window).scrollLeft();

사례 공유: 바이두 검색창 수정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding:0;
margin:0;

}
.all{
width:100%;
height:2000px;
}
.box{
width:100%;
height:75px;
background-color: #fff;
border: 1px solid #ccc;
position: relative;
}
.sousu-left img{
position: absolute;
top:20.5%;
left:28.45%;
}
.box1{width:536px;
      height: 41px;
      border:1px solid #ccc;
      margin:16px auto;
  }

.sousu-right span{
width:140px;
height:41px;
border:1px solid #ccc;
color:#fff;
background-color:rgb(51,136,255);
text-align: center;
line-height: 41px;
font-size:14px;
position: absolute;
right:28.64%;
top:19.69%;
      }
  .fixed{
   position: fixed;
   left:0;
   top:0;
  }
</style>
</head>
<body>
<div>
<div>
<!-- 定义左边和右边两个盒子 -->
<div>
<img src="images/logo_top_86d58ae1.png">
<div></div>
</div>
<div>
<span>百度一下</span>
</div>
</div>
</div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=$(".box").height())判断当卷曲的高度大于box高度时给box添加一个fixed属性,使它固定在顶部
{
$(".box").addClass("fixed");
}
else{
$(".box").removeClass("fixed");如果小于则移除class属性
}
})
})
</script>
</body>
</html>

Image 18.jpg

요약: 위 내용이 이 글의 전체 내용입니다. scrollTop 및 scrollLeft에 대해 더 잘 이해합니다. 애플리케이션이 더 명확해졌습니다


위 내용은 jQuery를 통해 페이지의 탐색 모음을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.