滑动容器和褪色标题Jquery / Javascript

Question

你好Stackoverflow。

所以我试图为我的网站制作一些滑动的Javascript / Jquery，我需要你的帮助。

我有以下首页：

信息页面：

在给定时刻，这些是2个单独的HTML文件，导航栏用HTML制作，代码如下：

<div id="nav">
    <ul>
        <li><a href='index.html'><span>Home</span></a></li>
        <li><a href='Spheroid.html'><span>Newlink Studio</span></a></li>
        <li><a href='Projects.html'><span>Projects</span></a></li>
        <li><a href='Contact.html'><span>Contact</span></a></li>
    </ul>
</div>

我想要发生的是，当＆＃34; Newlink Studio＆＃34;点击登录页面上的按钮，infocontainter向下滑动＆＃34; Newlink Studio＆＃34;淡出。我知道基本的Javascript和JQuery，但我发现这很难。我相信我必须在导航栏中选择Newlink项目，但我不确定如何为自己选择，而不是栏内的其他项目。

目标：当Newlink Studio在导航栏中被点击时，信息容器向下滑动并显示其所有文本，并且屏幕中间的标题位置淡出。如果Newlink Studio再次被点击，则没有任何反应，但是，如果您点击主页反转效果。

主要问题：选择＆＃34; Newlink Studio＆＃34;导航栏中的按钮，并正确设置代码。

提前谢谢你：）

为你们添加更多代码。

标题代码：

 <div class="jumbotron">
    <h1>newlink</h1>
    <h2>Studio</h2>
    </div>

    .jumbotron {
        width: 800px;
        height: 300px;
        background-color: rgba(255, 255, 255, 0);
        margin:auto;
    }

    .jumbotron h1 {
        color: #3299BB;
        font-size: 84px;
        text-decoration: underline;
        text-align: center;
        margin: auto;
        font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        text-transform: uppercase;
        font-weight: bold;
        text-shadow: #000000;
        text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;  
    }

    .jumbotron h2 {
        color: #3299BB;
        font-size: 40px;    
        text-align: center;
        text-transform: uppercase;
        margin: auto;
        font-weight: bold;
        font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
        text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;  
    }

容器的代码：

html, body {
    background-image:url(001.png);
    background-size: cover;
    background-color: #030303;
    background-repeat: no-repeat;
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

#container {
    flex: 1;
    width: 800px;
    height: 100%;
    text-align: left;
    padding-top: 7%;
    margin: 0 auto;
    background-color: #38788E;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 5px 0px rgba(50, 50, 50, 0.75);
}

想要尝试一些JS但是因为我找不到解决方案来选择导航栏项目，我认为我想先由你们的人去。

再次感谢：）