想实现侧边栏滚动到一定高度，侧边栏固定的效果，但是一直显示错误


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="v.css">
</head>

<body>
    <header>
        <nav>
           <ul>
               <li><a href="#" >首页</a></li>
               <li><a href="#" >首页</a></li>
               <li><a href="#" >首页</a></li>
               <li><a href="#" >首页</a></li>
               <li><a href="#" >首页</a></li>
           </ul>
        </nav>
    </header>
    <main>
        <div class="con">
            <ul>
                <li>第一个</li>
                <li>第一个</li>
                <li>第一个</li>
                <li>第一个</li>
                <li>第一个</li>
                <li>第一个</li>
                <li>第一个</li>
                <li>第一个</li>
                <li>第一个</li>
                <li>第一个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第二个</li>
                <li>第三个</li>
                <li>第三个</li>
                <li>第三个</li>
                <li>第三个</li>
                <li>第三个</li>
                <li>第三个</li>
                <li>第三个</li>
                <li>第三个</li>
                <li>第三个</li>
                <li>第三个</li>
            </ul>
        </div>
        <aside>
            <ul class="aside1" >
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
            <ul class="aside2">
                <li>第一章</li>
                <li>第二章</li>
                <li>第三章</li>
                <li>第四章</li>
            </ul>
        </aside>
    </main>
    <footer>

    </footer>
    <script src="v.js"></script>
</body>

</html>

html如上


* {
    margin    : 0;
    padding   : 0;
    box-sizing: content-box;
}

.fix {
    position: fixed;
}

@nh: 7vh;
@nw: 50vw;
@ah: 30vh;
@aw: 20vh;

body {
    header {
        width           : 100vw;
        height          : @nh;
        background-color: rgb(140, 140, 180);
        position        : fixed;

        nav {
            width : @nw;
            height: @nh;

            ul {
                width : @nw;
                height: @nh;

                li {
                    display    : block;
                    list-style : none;
                    width      : (@nw/5); //除法加上括号才能实现；
                    height     : @nh;
                    line-height: @nh;
                    float      : left;

                    a {
                        display        : block;
                        text-decoration: none;
                        text-align     : center;
                    }
                }
            }
        }
    }

    main {
        position: relative;
        top     : @nh;
        width   : 50vw;
        margin  : 0 auto;

        .con {
            width: 30vw;
            float: left;

            ul {
                li {
                    font-size : 6vh;
                    list-style: none;
                }
            }
        }

        aside {
            width   : @aw;
            float   : left;
            position: static;

            .aside1 {
                height: @ah;
                width : @aw;

                li {
                    font-size : 6vh;
                    list-style: none;
                }
            }

            .aside2 {
                width : @aw;
                height: @ah;

                li {
                    font-size : 6vh;
                    list-style: none;

                }
            }
        }
    }

    footer {}
}

css代码如上

window.onload = function () {
    var hei = document.documentElement.clientHeight;
    var navh = hei * 0.07;
    var topScroll = document.body.scrollTop;
    var aside = document.getElementsByClassName(".aside2");
    if (topScroll > navh) {
        aside.style.position = "fixed";
    } else {
        aside.style.position = "static";
    }
};

js代码如上

代码有两个问题
1、getElementsByClassName: 方法获取类名不需要加点（.）,直接写类名getElementsByClassName("aside2")
2、getElementsByClassName方法返回的是一个类数组，既然是数组那就不应该直接aside.style去赋值

如果只有一个就直接aside[0] 但是也不排除没有的情况还得做长度不等于0处理,如果aside有多个那么就得用循环处理了
当然如果你把class="aside2" 换成id="aside2" ，然后document.getElementById("aside2")，就可以直接使用 aside.style.position了，id只有一个
var aside = document.getElementsByClassName("aside2");
if(aside.length>0){
if (topScroll > navh) {
aside[0].style.position = "fixed";
} else {
aside[0].style.position = "static";
}
}