Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- google font -->
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
  <!-- Font-awsome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  </link>
  <!-- animate -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />
  <!-- AOS -->
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>

<body>
  <div class="wrap">
    <div class="slogan">
      <h1>STICKY SLIDER NAV</h1>
      <h3>Sliding content with sticky tab nav</h3>
    </div>
    <div class="button">
      <input type="text" class="text" placeholder="Oh Oh Give me">
      <input type="submit" class="send" value="Hey">
    </div>
    <ul class="mission"></ul>
  </div>
  <ul class="menu">
    <li><a href="#javascript" class="javascript">JavaScript</a></li>
    <li><a href="#node" class="node">Node</a></li>
    <li><a href="#react" class="react">React</a></li>
    <li><a href="#angular" class="angular">Angular</a></li>
    <li><a href="#vue" class="vue">Vue</a></li>
  </ul>
  <div class="wrap">
    <ul class="list">
      <li id="javascript">
        <div class="title">
          <h2>JavaScript</h2>
          <p>JavaScript是一種進階的、直譯的程式語言。</p>
        </div>
        <div class="pic">
          <img src="https://seeklogo.com/images/J/javascript-logo-E967E87D74-seeklogo.com.png" alt="react">
        </div>
      </li>
      <li id="node">
        <div class="title">
          <h2>Node.js</h2>
          <p>Node.js 是能夠在伺服器端運行 JavaScript 的開放原始碼、跨平台 JavaScript 執行環境。</p>
        </div>
        <div class="pic">
          <img src="https://seeklogo.com/images/N/nodejs-logo-FBE122E377-seeklogo.com.png" alt="react">
        </div>
      </li>
      <li id="react">
        <div class="title">
          <h2>React.js</h2>
          <p>React,是一個為資料提供彩現為HTML視圖的開源JavaScript 庫。</p>
        </div>
        <div class="pic">
          <img src="https://seeklogo.com/images/R/react-logo-7B3CE81517-seeklogo.com.png" alt="react">
        </div>
      </li>
      <li id="angular">
        <div class="title">
          <h2>Angular.js</h2>
          <p>AngularJS是一款由Google維護的開源JavaScript函式庫,用來協助單一頁面應用程式運行。</p>
        </div>
        <div class="pic">
          <img src="https://seeklogo.com/images/A/angular-logo-B76B1CDE98-seeklogo.com.png" alt="react">
        </div>
      </li>
      <li id="vue">
        <div class="title">
          <h2>Vue.js</h2>
          <p>Vue.js是一個用於建立使用者介面的開源JavaScript框架,也是一個建立單頁應用的Web應用框架。</p>
        </div>
        <div class="pic">
          <img src="https://seeklogo.com/images/V/vuejs-logo-17D586B587-seeklogo.com.png" alt="react">
        </div>
      </li>
    </ul>
  </div>
  <!-- https://www.youtube.com/watch?v=8-484p4BtZE -->

</body>

</html>
              
            
!

CSS

              
                * {
  padding: 0;
  margin: 0;
  list-style: none;
  line-height: 1.5em;
  letter-spacing: 0.1em;
  box-sizing: border-box;
  font-family: "Lato", "Noto Sans TC", sans-serif;
}

a {
  text-decoration: none;
  color: #000;
}

body {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
}

.wrap {
  max-width: 1024px;
  margin: 0 auto;
  text-align: center;
}

.wrap h3,
.wrap p {
  color: #878787;
}

img {
  width: 100%;
  vertical-align: middle;
}

.wrap .slogan {
  padding: 10% 0 0;
}

.slogan h1 {
  font-size: 48px;
  letter-spacing: 0.4em;
}

.slogan h3 {
  letter-spacing: 0.2em;
}

.menu {
  /* max-width: 1024px; */
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  box-shadow: 0 5px 15px #ccc, 0 -5px 15px #ccc;
}

.menu.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
}

.menu.showIn {
  transform: translateY(0);
}

.menu li {
  width: 20%;
}

.menu li a {
  display: block;
  padding: 10% 0;
  text-align: center;
  transition: 0.5s;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}

@media (max-width: 768px) {
  .wrap .slogan {
    padding: 5% 0 0;
  }

  .slogan h1 {
    font-size: 36px;
    letter-spacing: 0.2em;
  }

  .slogan h3 {
    letter-spacing: 0.1em;
  }

  .menu li a {
    font-size: 16px;
  }
}

.list li {
  padding: 10% 0;
}

.title h2 {
  font-size: 48px;
  letter-spacing: 0.2em;
}

#javascript .pic {
  width: 25%;
}

.pic {
  width: 30%;
  padding: 5% 0;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .title h2 {
    font-size: 36px;
    letter-spacing: 0.1em;
  }

  .title p {
    font-size: 14px;
  }

  .list li {
    padding: 20% 0;
  }

  .list li:last-child {
    padding-bottom: 50%;
  }
}

.javascript.active::after,
.node.active::after,
.react.active::after,
.angular.active::after,
.vue.active::after,
.javascript.active::before,
.node.active::before,
.react.active::before,
.angular.active::before,
.vue.active::before {
  content: "";
  width: 100%;
  height: 10px;
  position: absolute;
  left: 0;
}

.javascript {
  background-color: #f1be38;
}

.javascript.active::after {
  background-color: #e6a33a;
  bottom: 0;
}

.javascript.active::before {
  background-color: #e6a33a;
  top: 0;
}

#javascript h2 {
  color: #f1be38;
}

.node {
  background-color: #569d48;
}

.node.active::after {
  background-color: #eeeeee;
  bottom: 0;
}

.node.active::before {
  background-color: #eeeeee;
  top: 0;
}

#node h2 {
  color: #569d48;
}

.react {
  background-color: #59c1dd;
}

.react.active::after {
  background-color: #fff;
  bottom: 0;
}

.react.active::before {
  background-color: #fff;
  top: 0;
}

#react h2 {
  color: #59c1dd;
}

.angular {
  background-color: #e0353d;
}

.angular.active::after {
  background-color: #b33035;
  bottom: 0;
}

.angular.active::before {
  background-color: #b33035;
  top: 0;
}

#angular h2 {
  color: #e0353d;
}

.vue {
  background-color: #47b785;
}

.vue.active::after {
  background-color: #364a5d;
  bottom: 0;
}

.vue.active::before {
  background-color: #364a5d;
  top: 0;
}

#vue h2 {
  color: #47b785;
}

@media (max-width: 768px) {
  .javascript.active::after,
  .node.active::after,
  .react.active::after,
  .angular.active::after,
  .vue.active::after,
  .javascript.active::before,
  .node.active::before,
  .react.active::before,
  .angular.active::before,
  .vue.active::before {
    height: 5px;
  }
}

.button {
  width: 30%;
  margin: 2% auto;
  display: flex;
  justify-content: center;
}

.button .text {
  padding: 2%;
  width: 80%;
  border-radius: 10px 0 0 10px;
}

.button .send {
  width: 20%;
  border-radius: 0 10px 10px 0;
  background-color: #000;
  color: #fff;
  font-weight: bold;
}

.button .text,
.button .send {
  border: none;
  outline: none;
}

.mission {
  width: 30%;
  margin: 0 auto;
  text-align: left;
}

.mission li {
  display: flex;
  align-items: center;
}

.mission li a {
  padding: 1.5% 3%;
  border-radius: 50%;
  border: 1px solid #000;
  margin: 5%;
  transition: 0.5s;
  font-weight: bold;
}

.mission li a:hover {
  background-color: #fff;
}

@media (max-width: 768px) {
  .button {
    width: 50%;
  }

  .mission {
    width: 50%;
  }
}

              
            
!

JS

              
                (function () {
  $(document).ready(function () {
    //最中間開始

    //取出menu位置
    let menuTop = $(".menu").offset().top;
    // console.log(menuTop);
    //複製menu
    let menuHtml = $(".menu").clone();
    //加到頁面上
    $("body").append(menuHtml);
    menuHtml.addClass("fixed");
    $(window).scroll(function () {
      // console.log('test');
      //找出滾動位置
      let scrollTop = $(window).scrollTop();
      //找出物件位置的值
      let listTop = $(".list").offset().top;
      //取出menu高度值
      let menuHeight = $(".menu").height();
      //console.log(menuHeight);

      console.log(scrollTop, listTop);
      //取出menu的高度

      //判斷條件(中間開始)
      if (scrollTop > menuTop) {
        $(menuHtml).addClass("showIn");
      } else {
        $(menuHtml).removeClass("showIn");
      }
    });

    //最上方開始
    // $(window).scroll(function () {
    //     // console.log('test');
    //     //找出滾動位置
    //     let scrollTop = $(window).scrollTop();
    //     //找出物件位置的值
    //     let listTop = $('.list').offset().top;
    //     //取出menu高度值
    //     let menuHeight = $('.menu').height();
    //     //console.log(menuHeight);

    //     console.log(scrollTop, listTop);
    //     //取出menu的高度

    //     //判斷條件(最上方開始)
    //      if (scrollTop > mainTop) {
    //          $('.menu').addClass('fixed');
    //          //補空間,消除跑版
    //          $('body').css('paddingTop', menuHeight);
    //      } else {
    //          $('.menu').removeClass('fixed');
    //          $('body').css('paddingTop', 0);
    //      }
    // });

    //點擊滑動
    $(function () {
      $(".javascript").on("click", function () {
        $("html,body").animate(
          { scrollTop: $("#javascript").offset().top },
          600
        );
        $(this).toggleClass("active");
        $(this).parent().siblings().find("a").removeClass("active");
      });
      $(".node").on("click", function () {
        $("html,body").animate({ scrollTop: $("#node").offset().top }, 600);
        $(this).toggleClass("active");
        $(this).parent().siblings().find("a").removeClass("active");
      });
      $(".react").on("click", function () {
        $("html,body").animate({ scrollTop: $("#react").offset().top }, 600);
        $(this).toggleClass("active");
        $(this).parent().siblings().find("a").removeClass("active");
      });
      $(".angular").on("click", function () {
        $("html,body").animate({ scrollTop: $("#angular").offset().top }, 600);
        $(this).toggleClass("active");
        $(this).parent().siblings().find("a").removeClass("active");
      });
      $(".vue").on("click", function () {
        $("html,body").animate({ scrollTop: $("#vue").offset().top }, 600);
        $(this).toggleClass("active");
        $(this).parent().siblings().find("a").removeClass("active");
      });
    });
  });

  //todo list
  //DOM
  let mission = document.querySelector(".mission");
  let send = document.querySelector(".send");
  let data = JSON.parse(localStorage.getItem("listData")) || [];

  function addData() {
    // console.log('test');
    let text = document.querySelector(".text").value;
    // console.log(text);
    if (text == "") {
      alert("You need to input data");
      return;
    }

    let todo = {
      item: text
    };
    // console.log(todo);
    data.push(todo);
    // console.log(data);
    localStorage.setItem("listData", JSON.stringify(data));
    updateList(data);
  }

  function updateList(items) {
    let len = data.length;
    // console.log(len);
    let str = "";
    for (let i = 0; i < len; i++) {
      str += `<li><a href="#" data-index="${i}"> X </a> ${items[i].item} </li>`;
    }
    mission.innerHTML = str;
    reset();
  }

  function deleteData(e) {
    e.preventDefault();
    let target = e.target.nodeName;
    // console.log(target);
    let index = e.target.dataset.index;
    // console.log(index);
    if (target !== "A") {
      return;
    }
    data.splice(index, 1);
    localStorage.setItem("listData", JSON.stringify(data));
    updateList(data);
  }

  function reset() {
    document.querySelector(".text").value = "";
  }
  send.addEventListener("click", addData, false);
  mission.addEventListener("click", deleteData, false);
  updateList(data);
})();

              
            
!
999px

Console