Difference between revisions of "Template:XJTU-China/header"

    <section class="d-flex flex-column">

        <header class="header_area" id="topHeader">

            <!-- <embed class="logo" src="https://static.igem.org/mediawiki/2021/4/43/T--XJTU-China--logo-svg.svg"

            <a href="/Team:XJTU-China" class="logo"></a>

            <nav class="navbar navbar-expand-lg navbar-light">

                <div class="container">

                    <!-- Brand and toggle get grouped for better mobile display -->

                    <button class="navbar-toggler" type="button" data-toggle="collapse"

                        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"

                        aria-expanded="false" aria-label="Toggle navigation">MENU

                        <span class="fa fa-bars" aria-hidden="true"></span>

                    </button>

                    <!-- Collect the nav links, forms, and other content for toggling -->

                    <div class="collapse navbar-collapse offset" id="navbarSupportedContent">

                        <ul class="nav navbar-nav menu_nav ml-auto">

                            <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China">home</a></li>

                            <li class="nav-item submenu dropdown">

                                <a href="/Team:XJTU-China/Description" class="nav-link dropdown-toggle"

                                    data-toggle="dropdown" role="button" aria-haspopup="true"

                                    aria-expanded="false">Project&nbsp;<span class="fa fa-caret-down"

                                        aria-hidden="true"></span></a>

                                <ul class="dropdown-menu">

                                    <li class="nav-item"><a class="nav-link"

                                            href="/Team:XJTU-China/Description">description</a></li>

                                    <li class="nav-item">

                                        <a class="nav-link" href="/Team:XJTU-China/Design">design</a>

                                    </li>

                                    <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Parts">parts</a>

                                    </li>

                                </ul>

                            </li>

                            <li class="nav-item submenu dropdown">

                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"

                                    aria-haspopup="true" aria-expanded="false">wetlab&nbsp;<span

                                        class="fa fa-caret-down" aria-hidden="true"></span></a>

                                <ul class="dropdown-menu">

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">engineering</a></li>

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">lab note</a></li>

                                </ul>

                            </li>

                            <li class="nav-item submenu dropdown">

                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"

                                    aria-haspopup="true" aria-expanded="false">drylab&nbsp;<span

                                        class="fa fa-caret-down" aria-hidden="true"></span></a>

                                <ul class="dropdown-menu">

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">modeling</a></li>

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">simulation</a></li>

                                </ul>

                            </li>

                            <li class="nav-item"><a class="nav-link" href="contact.html">parts</a></li>

                            <li class="nav-item submenu dropdown">

                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"

                                    aria-haspopup="true" aria-expanded="false">Human Practices&nbsp;<span

                                        class="fa fa-caret-down" aria-hidden="true"></span></a>

                                <ul class="dropdown-menu">

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">explore</a></li>

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">interview</a></li>

                                </ul>

                            </li>

                            <li class="nav-item submenu dropdown end">

                                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"

                                    aria-haspopup="true" aria-expanded="false">Team&nbsp;<span class="fa fa-caret-down"

                                        aria-hidden="true"></span></a>

                                <ul class="dropdown-menu">

                                    <li class="nav-item"><a class="nav-link" href="/Team:XJTU-China/Team">crew</a></li>

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">attibutions</a></li>

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">collaboration</a></li>

                                    <li class="nav-item"><a class="nav-link" href="ieee.html">partners</a></li>

                                </ul>

                            </li>

                        </ul>

                    </div>

             </nav>

         </header>

     </section>

    <!--movingLogo-->

    <script>

        var logo = $('.logo');

        var animData = {

            container: logo[0], // the dom element that will contain the animation

            renderer: 'svg',

            loop: true,

            autoplay: false,

            path: 'https://static.igem.org/mediawiki/2021/c/c5/T--XJTU-China--logoMoving.txt' // the path to the animation json

        }

        var logoAnim = lottie.loadAnimation(animData);

        logoAnim.setSpeed(1.5);

        $(logo).hover(function () { logoAnim.play(); },

            function () { logoAnim.pause(); })

    </script>

    <!--headerTransition-->

    <script>

        window.addEventListener('scroll', () => {

            // var h = document.getElementById('topHeader');

            // height = h.clientHeight;

            var h = scrollBar.scroll.position;

            console.log(h);

            let header = document.querySelector('header');

            let logo = document.querySelector('.logo');

            header.classList.toggle('sticky', window.scrollY > height);

            logo.classList.toggle('sticky', window.scrollY > height);

        })

    </script>