zepto 쇼핑 몰 상단 분류 내 비게 이 션 드 롭 다운 메뉴 코드
19567 단어 자바 script
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<style type="text/css">
*{margin:0;padding:0;}
#box{
width:900px;
margin:0 auto 500px;
}
ul,li{list-style:none;}
.float-location{height:50px;}
.banner{
height:200px;
background-color:lightgrey;
text-align:center;
line-height:200px;
}
.float-location-tab li {
float: left;
width: 20%;
text-align: center;
height: 50px;
line-height: 50px;
background-color: #bca080;
font-size: 20px;
color: #fff;
font-family: "Microsoft YaHei";
}
.title{
text-align:center;
width:100%;
height:50px;
line-height:50px;
}
.bg{
height:500px;
width:100%;
}
.bg1{
background-color:blue;
}
.bg2{
background-color:red;
}
.bg3{
background-color:beige;
}
.bg4{
background-color:aquamarine;
}
.bg5{
background-color:silver;
}
.float-location-tab li.active{
background-color: #ff2b53;
position: relative;
}
.fixed{
position: fixed;
width: 100%;
max-width: 900px;
top: 0;
z-index: 2;
}
.clear:after, .clear:before{
content: "";
display: table;
}
*:before, *:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
style>
<body>
<div id="box">
<div class="banner">bannerdiv>
<div class="prods_wrapper">
<div class="float-location">
<ul class="float-location-tab clear" id="float-loaction-tab">
<li class="active"> li>
<li > li>
<li > li>
<li > li>
<li > li>
ul>
div>
<div id="prods-div">
<p class="title">title1p>
<div class="bg bg1">div>
<p class="title">title2p>
<div class="bg bg2">div>
<p class="title">title3p>
<div class="bg bg3">div>
<p class="title">title4p>
<div class="bg bg4">div>
<p class="title">title5p>
<div class="bg bg5">div>
div>
div>
div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js">script>
<script type="text/javascript">
var locateNav = function (obj) {
if (Object.prototype.toString.call(obj) !== '[object Object]') {
return;
}
var $navWrapper = $(obj.navWrapper),
$nav = $(obj.nav),
$navBtn = $nav.find('li'),
$floors = $(obj.floors),
$window = $(window),
len = $floors.length;
if ($navWrapper.size()) {
setTimeout(setNavStatus, 500);
eventHandle();
}
function eventHandle() {
$window.on('scroll', function () {
setNavStatus();
setNavBtnStatus();
});
$navBtn.on('click', function () {
var $this = $(this),
targetTop = $floors.eq($this.index()).offset().top,
navHeight = $navWrapper.height();
setNavBtnClass($this);
$('html,body').scrollTop(targetTop - navHeight);
});
}
function setNavStatus() {
if ($window.scrollTop() >= $navWrapper.offset().top) {
$nav.addClass('fixed');
} else {
$nav.removeClass('fixed');
}
}
function setNavBtnStatus() {
var toTop = $window.scrollTop(),
navHeight = $navWrapper.height();
for (var i = len; i > 0; i--) {
if (toTop >= $floors.eq(i - 1).offset().top - navHeight - 8) {
setNavBtnClass($navBtn.eq(i - 1));
break;
} else {
setNavBtnClass($navBtn.eq(0));
}
}
}
function setNavBtnClass($target) {
$target.addClass('active').siblings().removeClass('active');
}
};
//
locateNav({
navWrapper: '.float-location',
nav: '#float-loaction-tab',
floors: '.title'
})
script>
body>
html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Thymeleaf 의 일반 양식 제출 과 AJAX 제출텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
