jQuery를 통해 페이지의 탐색 모음을 수정하는 방법-JS 튜토리얼-php.cn

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

清浅

풀어 주다： 2018-11-23 17:55:27

원래의

3423명이 탐색했습니다.

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

네비게이션 바를 만들 때 레이아웃에 익숙한 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