jQuery는 슬라이딩 페이지의 상단 표시를 고정하는 기능을 구현합니다.
- 不言원래의
- 2018-06-25 14:40:481647검색
이 기사에서는 주로 슬라이딩 페이지의 상단 표시를 구현하기 위해 jQuery를 소개합니다. 또한 표시 위치에 따라 해당 현재 표시 항목을 대체할 수도 있습니다. 필요한 경우 이를 참조할 수 있습니다. 기사에서는 슬라이딩을 구현하는 jQuery의 예를 설명합니다. 페이지 상단 표시를 고정했습니다(표시 위치에 따라 사라지거나 교체될 수 있음). 참고하실 수 있도록 자세한 내용은 다음과 같습니다.
여기에 소개된 jQuery는 페이지를 고정된 상단 디스플레이로 끌어오고 IE 브라우저에서는 문제가 발생할 수 있지만 Firefox에서는 실행될 수 있습니다. 효과를 보려면 매우 일반적으로 사용되는 "맨 위로 가기" 효과인 간단한 웹 페이지 특수 효과를 살펴보십시오.
런닝 효과의 스크린샷은 다음과 같습니다.
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>回到顶部：哭泣的小丑</title>
<script src="jquery-1.6.2.min.js"></script>
<!-- CSS模板清除 -->
<style>
html, body, p, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, input,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;float:left;}select, input, button,button img, label {vertical-align: middle;}body {font:normal 12px/1.5 "Microsoft Yahei","微软雅黑",Tahoma,Arial,Helvetica,STHeiti; webkit-font-smoothing:antialiased;-moz-font-smoothing: subpixel-antialiased; color:#666;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}em {font-style: normal}select, input, button, button img, label {vertical-align:middle;}input {font-family:"Microsoft Yahei","微软雅黑";webkit-font-smoothing:antialiased;-moz-font-smoothing: subpixel-antialiased}input, input:focus, button, button:focus, select,textarea, textarea:focus {outline:none; -moz-outline:none; -webkit-outline:none; }input:focus { outline:none; -moz-outline:none; -webkit-outline:none; }textarea {resize:none;}a {color:#666; text-decoration:none;} a:hover {text-decoration:underline;}a:focus {outline:none; -moz-outline:none;-webkit-outline:none;}body {min-width: 960px;}
</style>
<!-- CSS模板清除 E-->
<!-- main CSS -->
<style>
body{background:#e7e7e7;}
.clearfix:before, .clearfix:after, .container_24:before, .container_24:after {
content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;}
.clearfix:after, .container_24:after { clear: both; }
.Xc_main{width:750px;margin:0 auto;position:relative;}
.Xc_left{float:left;}
.Xc_left h1{font-size:24px;padding-top:25px;}
.Xc_right{float:right;width:600px;}
.Xc_right .Xc_list{margin:10px 0 10px 0;}
.Xc_list_top,.Xc_list_main{background:#fff;padding:10px;border:1px solid #ccc;}
.Xc_list_top{margin-bottom:10px;}
.Xc_gg{width:90px;height:90px;border:1px solid #ccc;background:#fff;text-align:center;}
.Xc_bottom{height:650px;background:#fff;padding:10px;border:1px solid #ccc;position:relative;}
</style>
<!-- main CSS E-->
</head>
<script>
$(function () {
$(".Xc_list_top").css("width",$(".Xc_list_main").width());
var resetRightPanelPostion = function () {
var msie6 = $.browser.msie && $.browser.version == '6.0' && $.browser.version < 7;
if ($.browser.safari) {
bodyelem = $("body");
} else {
bodyelem = $("html,body");
}
var bodyTop = bodyelem.scrollTop();
var top = $(".Xc_left").offset().top;
//var t = $("#public_footer").offset().top;
var t = $("#footerDestinationBox").offset().top;
//var bottom = $("#footerDestinationBox").offset().top;
for(var i = 0 ; i < $(".Xc_list .Xc_list_top").length ; i++){
if (bodyTop >= top && ((bodyTop + $(".Xc_left").outerHeight()) < t)) {
if (!msie6) {
if (bodyTop + $(".Xc_gg").outerHeight() >= t) {
$(".Xc_gg").removeClass('fixed').css({
"position": "absolute",
"top": t - $(".Xc_gg").outerHeight() + "px"
});
} else {
$(".Xc_gg").css({
"position": "fixed",
"top": 0
});
}
}
} else {
if (!msie6) {
$(".Xc_gg").css({
"position": "static"
});
}
}
if(bodyTop>$(".Xc_list").eq(i).offset().top){
$(".Xc_list_top").eq(i).css({position:"absolute",top:top-168});
}
if(bodyTop>$(".Xc_list").eq(i).offset().top){
$(".Xc_list_top").eq(i).css({position:"fixed",top:0});
}
if(bodyTop<=$(".Xc_list").eq(i).offset().top){
$(".Xc_list_top").eq(i).css({position:"static",top:0});
}
}
};
window.onload = function () {
if ($(".Xc_gg").length) {
resetRightPanelPostion();
$(window).scroll(function () {
resetRightPanelPostion();
});
}
}
})
</script>
<body>
<p class="Xc_main clearfix">
<p class="clearfix" style="margin-top:90px;float:left;">
<p class="Xc_left">
<p class="Xc_gg">
<h1>小丑</h1>
<p style="margin-top:40px;">Q群:<em style="color:#0069D6;">150508281</em></p>
</p>
</p>
</p>
<p class="Xc_right clearfix">
<p class="Xc_list">
<p class="Xc_list_top" id="Xc_list_top">top 1</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 2</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 3</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 4</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 5</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
<p class="Xc_list">
<p class="Xc_list_top">top 6</p>
<p class="Xc_list_main" style="height:300px;background:#fff;">
</p>
</p>
</p>
</p>
<p class="Xc_bottom clearfix" id="footerDestinationBox">
<p style="position:absolute;top:40px;right:50px;"> by 蓝色理想 @哭泣的小丑</p>
</p>
</body>
</html>
위는 이 글의 전체 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!
관련 권장 사항:
타임라인 효과를 구현하는 jQuery 플러그인 Timelinr에 대해JS는 모바일 단말기에서 왼쪽으로 슬라이드하는 기능을 구현하여 삭제 버튼을 표시합니다위 내용은 jQuery는 슬라이딩 페이지의 상단 표시를 고정하는 기능을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.