zepto 쇼핑 몰 상단 분류 내 비게 이 션 드 롭 다운 메뉴 코드


<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에 따라 라이센스가 부여됩니다.

zepto 쇼핑 몰 상단 분류 내 비게 이 션 드 롭 다운 메뉴 코드

좋은 웹페이지 즐겨찾기