鍍金池/ 問(wèn)答/HTML/ js源碼解讀

js源碼解讀

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery商城常用樓層定位菜單代碼</title>

<style>
    *{
        margin:0;
        padding:0;
    }
    html,body{
        font-size:16px;
        font-family:'microsoft YaHei';
    }
    a{
        text-decoration:none;
        color:#999;
    }
    ul li{
        list-style:none;
    }
    .slider{
        position:fixed;
        top:50%;
        left:2%;
        transform:translateY(-50%);
        -webkit-transform:translateY(-50%);
    }
    .slider ul li{
        width:55px;
        height:30px;
        border-radius:10px;
        background:lightgreen;
        /*margin-bottom:10px;*/
        text-align:center;
        line-height:30px;
    }
    .slider ul li.active{
        background:green;
    }
    .slider ul li.active a{
        color:#fff;
    }
    .slider ul li:nth-of-type(even){
        width:3px;
        height:35px;
        background:lightgreen;
        margin:0 auto;
    }
    #header{
        height:280px;
        text-align:center;
        line-height:280px;
        font-size:60px;
        background:mediumpurple;
    }
    .content{
        width:1200px;
        margin:0 auto;
    }
    .content .section{
        height:700px;
        text-align:center;
        line-height:700px;
        font-size:60px;
        margin-bottom:20px;
    }
    .content .section1{
        background:lightpink;
    }
    .content .section2{
        background:lightblue;
    }
    .content .section3{
        background:lightgreen;
    }
    .content .section4{
        background:lightyellow;
    }
    .content .section5{
        background:deeppink;
    }
    .content .section6{
        background:lightcyan;
    }
</style>

</head>
<body><script src="/demos/googlegg.js"></script>

<div class="container">
    <div id="slider" class="slider">
        <ul>
            <li class="active"><a href="#">一樓</a></li>
            <li class="line"></li>
            <li><a href="#">二樓</a></li>
            <li class="line"></li>
            <li><a href="#">三樓</a></li>
            <li class="line"></li>
            <li><a href="#">四樓</a></li>
            <li class="line"></li>
            <li><a href="#">五樓</a></li>
            <li class="line"></li>
            <li><a href="#">六樓</a></li>
        </ul>
    </div>
    <!-- <div id="header">頭部</div> -->
    <div id="content" class="content">
        <div class="section section1 div">對(duì)應(yīng)一樓內(nèi)容部分</div>
        <div class="div"></div>
        <div class="section section2 div">對(duì)應(yīng)二樓內(nèi)容部分</div>
        <div class="div"></div>
        <div class="section section3 div">對(duì)應(yīng)三樓內(nèi)容部分</div>
        <div class="div"></div>
        <div class="section section4 div">對(duì)應(yīng)四樓內(nèi)容部分</div>
        <div class="div"></div>
        <div class="section section5 div">對(duì)應(yīng)五樓內(nèi)容部分</div>
        <div class="div"></div>
        <div class="section section6 div">對(duì)應(yīng)六樓內(nèi)容部分</div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function(){
    $("li:odd").hide();//li的第偶數(shù)個(gè)隱藏
    $("#slider ul li.active").next().show();//激活的li下面那條線顯示

    $(window).scroll(function(){
        var winHeight = $(window).height();
        var scrollHeight = $(window).scrollTop();
        // if($("#header").height()){   //判斷側(cè)邊欄什么時(shí)候顯示
            $("#content .section").each(function(){
                if(winHeight+scrollHeight-$(this).offset().top>winHeight/2){
                    $("#slider ul li").removeClass("active").prev(".line").hide();
                    $("#slider ul li").eq($(this).index()).addClass("active").next(".line").show();
                }
            })
        // }
    })
    $("#slider ul li").click(function(){

        var current = $("#content .div").eq($(this).index()).offset().top;
        $("html,body").animate({
            "scrollTop":current
        },500);
        $(this).addClass("active").siblings().removeClass("active").siblings(".line").hide();
        $(this).eq($(this).index()).addClass("active").next(".line").show();
    })
})
</script>

在github上看到一段樓層導(dǎo)航的代碼，對(duì)if判斷條件：

winHeight+scrollHeight-$(this).offset().top>winHeight/2

不明白，能畫圖說(shuō)明嗎？

回答
編輯回答
拽很帥

這個(gè)是判斷dom是否在window上半部分

2017年9月11日 20:15