index.html

<!DOCTYPE html>
<html>
<head>
  <title>Music</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/notosanskr.css" rel="stylesheet">
</head>
<body>
  <!-- navigation bar -->
  <div class="navbar">
    <a class="logo" href="#">
      <img src="images/logo.png" width="34" height="33">
    </a>

    <ul class="menu-left navbar-menu">
      <li class="menu-item"><a href="#">인기차트</a></li>
      <li class="menu-item"><a href="#">추천음악</a></li>
      <li class="menu-item"><a href="#">뮤직비디오</a></li>
    </ul>

    <div class="search-box">
      <img src="images/search.png" width="24" height="24">
      <input type="text" placeholder="오늘은 무슨 음악을 들을까?">
    </div>

    <ul class="menu-right navbar-menu">
      <li class="menu-item"><a href="#">회원가입</a></li>
      <li class="menu-item"><a href="#">로그인</a></li>
    </ul>
  </div>

  <!-- go to top button -->
  <button class="to-top-btn">
    <img src="images/arrow.png" width="24" height="24">
  </button>

  <!-- main -->
  <div class="container">
    <div class="popular">
      <h2>인기 검색어</h2>

      <ol class="top10">
        <li class="keyword"><a href="#">아이유 (IU)</a></li>
        <li class="keyword"><a href="#">방탄소년단 (BTS)</a></li>
        <li class="keyword"><a href="#">레드벨벳</a></li>
        <li class="keyword"><a href="#">아이콘 (iKON)</a></li>
        <li class="keyword"><a href="#">멜로망스</a></li>
        <li class="keyword"><a href="#">다비치</a></li>
        <li class="keyword"><a href="#">윤딴딴</a></li>
        <li class="keyword"><a href="#">수지</a></li>
        <li class="keyword"><a href="#">김동률</a></li>
        <li class="keyword"><a href="#">폴킴</a></li>
      </ol>
    </div>

    <ul class="playlists">
      <li class="playlist">
        <span class="pl-topic">수면</span>

        <img class="pl-img" src="images/playlist1.jpg" width="397" height="240">

        <div class="pl-info">
          <div class="header">
            <img class="pl-user-img" src="images/user1.png" width="60" height="60">

            <h2 class="pl-title"><a href="#">꿀잠 자게 해줄 잔잔한 음악 플레이리스트</a></h2>
          </div>

          <ul class="tags">
            <li class="tag"><a href="#">#오늘의선곡</a></li>
            <li class="tag"><a href="#">#꿀잠</a></li>
            <li class="tag"><a href="#">#수면유도</a></li>
            <li class="tag"><a href="#">#불면증</a></li>
            <li class="tag"><a href="#">#낮잠</a></li>
            <li class="tag"><a href="#">#힐링</a></li>
            <li class="tag"><a href="#">#굳밤</a></li>
          </ul>

          <div class="stats">
            <img src="images/like_count.png" width="20" height="20"><span class="like-count">108</span>

            <img src="images/song_count.png" width="20" height="20"><span class="song-count">15곡</span>
          </div>
        </div>
      </li>

      <li class="playlist">
        <span class="pl-topic">여행</span>

        <img class="pl-img" src="images/playlist2.jpg" width="397" height="240">

        <div class="pl-info">
          <div class="header">
            <img class="pl-user-img" src="images/user2.png" width="60" height="60">

            <h2 class="pl-title"><a href="#">어디론가 떠나고 싶을 때 듣는 트렌디한 음악</a></h2>
          </div>

          <ul class="tags">
            <li class="tag"><a href="#">#오늘의선곡</a></li>
            <li class="tag"><a href="#">#힐링</a></li>
            <li class="tag"><a href="#">#여행</a></li>
            <li class="tag"><a href="#">#Life</a></li>
          </ul>

          <div class="stats">
            <img src="images/like_count.png" width="20" height="20"><span class="like-count">76</span>

            <img src="images/song_count.png" width="20" height="20"><span class="song-count">15곡</span>
          </div>
        </div>
      </li>

      <li class="playlist">
        <span class="pl-topic">힙합</span>

        <img class="pl-img" src="images/playlist3.jpg" width="397" height="240">

        <div class="pl-info">
          <div class="header">
            <img class="pl-user-img" src="images/user3.png" width="60" height="60">

            <h2 class="pl-title"><a href="#">그때 그 시절, 90년대 미국 인기 힙합 플레이리스트</a></h2>
          </div>

          <ul class="tags">
            <li class="tag"><a href="#">#오늘의선곡</a></li>
            <li class="tag"><a href="#">#힙합</a></li>
            <li class="tag"><a href="#">#90년대</a></li>
            <li class="tag"><a href="#">#HipHop</a></li>
          </ul>

          <div class="stats">
            <img src="images/like_count.png" width="20" height="20"><span class="like-count">79</span>

            <img src="images/song_count.png" width="20" height="20"><span class="song-count">30곡</span>
          </div>
        </div>
      </li>

      <li class="playlist">
        <span class="pl-topic">일렉트로</span>

        <img class="pl-img" src="images/playlist4.jpg" width="397" height="240">

        <div class="pl-info">
          <div class="header">
            <img class="pl-user-img" src="images/user4.png" width="60" height="60">

            <h2 class="pl-title"><a href="#">스트레스를 한 방에 날려줄 신나는 일렉트로댄스 음악</a></h2>
          </div>

          <ul class="tags">
            <li class="tag"><a href="#">#일렉트로</a></li>
            <li class="tag"><a href="#">#일렉트로댄스</a></li>
            <li class="tag"><a href="#">#클럽</a></li>
            <li class="tag"><a href="#">#전자음악</a></li>
            <li class="tag"><a href="#">#댄스</a></li>
            <li class="tag"><a href="#">#스트레스</a></li>
          </ul>

          <div class="stats">
            <img src="images/like_count.png" width="20" height="20"><span class="like-count">92</span>

            <img src="images/song_count.png" width="20" height="20"><span class="song-count">20곡</span>
          </div>
        </div>
      </li>

      <li class="playlist">
        <span class="pl-topic">재즈</span>

        <img class="pl-img" src="images/playlist5.jpg" width="397" height="240">

        <div class="pl-info">
          <div class="header">
            <img class="pl-user-img" src="images/user5.png" width="60" height="60">

            <h2 class="pl-title"><a href="#">여유로운 카페 음악</a></h2>
          </div>

          <ul class="tags">
            <li class="tag"><a href="#">#공부</a></li>
            <li class="tag"><a href="#">#집중</a></li>
            <li class="tag"><a href="#">#카페음악</a></li>
            <li class="tag"><a href="#">#보사노바</a></li>
            <li class="tag"><a href="#">#재즈</a></li>
            <li class="tag"><a href="#">#힐링</a></li>
            <li class="tag"><a href="#">#휴식</a></li>
          </ul>

          <div class="stats">
            <img src="images/like_count.png" width="20" height="20"><span class="like-count">78</span>

            <img src="images/song_count.png" width="20" height="20"><span class="song-count">15곡</span>
          </div>
        </div>
      </li>

      <li class="playlist">
        <span class="pl-topic">계절음악</span>

        <img class="pl-img" src="images/playlist6.jpg" width="397" height="240">

        <div class="pl-info">
          <div class="header">
            <img class="pl-user-img" src="images/user6.png" width="60" height="60">

            <h2 class="pl-title"><a href="#">추운 겨울, 당신의 마음을 녹여줄 따뜻한 음악</a></h2>
          </div>

          <ul class="tags">
            <li class="tag"><a href="#">#계절음악</a></li>
            <li class="tag"><a href="#">#겨울</a></li>
            <li class="tag"><a href="#">#날씨</a></li>
            <li class="tag"><a href="#">#휴식</a></li>
            <li class="tag"><a href="#">#집</a></li>
          </ul>

          <div class="stats">
            <img src="images/like_count.png" width="20" height="20"><span class="like-count">46</span>

            <img src="images/song_count.png" width="20" height="20"><span class="song-count">15곡</span>
          </div>
        </div>
      </li>

      <li class="playlist">
        <span class="pl-topic">하우스 EDM</span>

        <img class="pl-img" src="images/playlist7.jpg" width="397" height="240">

        <div class="pl-info">
          <div class="header">
            <img class="pl-user-img" src="images/user7.png" width="60" height="60">

            <h2 class="pl-title"><a href="#">기분 좋은 연말, 디너파티를 위한 일렉트로 하우스 음악</a></h2>
          </div>

          <ul class="tags">
            <li class="tag"><a href="#">#하우스</a></li>
            <li class="tag"><a href="#">#파티</a></li>
            <li class="tag"><a href="#">#연말</a></li>
            <li class="tag"><a href="#">#크리스마스</a></li>
            <li class="tag"><a href="#">#디너파티</a></li>
          </ul>

          <div class="stats">
            <img src="images/like_count.png" width="20" height="20"><span class="like-count">57</span>

            <img src="images/song_count.png" width="20" height="20"><span class="song-count">32곡</span>
          </div>
        </div>
      </li>
    </ul>
  </div>

  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script src="js/script.js"></script>
</body>
</html>

css/styles.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #fafafa;
  font-family: 'Noto Sans KR', sans-serif;
  min-width: 1200px;
}

/* navigation bar */

.navbar {
  background-color: white;
  height: 59px;
  line-height: 59px;
  padding: 0 82px;
  position: relative;
}

.navbar .logo {
  float: left;
}

.navbar .logo img {
  vertical-align: middle;
}

.navbar .navbar-menu {
  padding: 0;
  margin: 0 10px;
  list-style: none;
}

.navbar .menu-left {
  float: left;
}

.navbar .menu-right {
  float: right;
}

.navbar .navbar-menu li {
  display: inline-block;
  font-size: 16px;
  margin: 0 10px;
}

.navbar .navbar-menu li a {
  color: #4a4a4a;
  text-decoration: none;
}

.navbar .search-box {
  display: inline-block;
  vertical-align: middle;
  width: 371px;
  height: 34px;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  top: 12px;
  left: 0;
  right: 0;
}

.navbar .search-box img {
  position: absolute;
  left: 13px;
  top: 6px;
}

.navbar .search-box input {
  display: block;
  width: 371px;
  height: 36px;
  border-radius: 22px;
  background-color: white;
  border: solid 1px #4a90e2;
  padding: 0 51px;
  font-size: 14px;
  color: #4a4a4a;
  outline: none;
}

/* go to top button */

.to-top-btn {
  background-color: white;
  padding: 15px;
  border: none;
  outline: none;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.05), 0 5px 5px 0 rgba(0,0,0,0.05);
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1;
  display: none;
}

/* container */

.container {
  width: 992px;
  margin: 34px auto;
}

/* popular */

.popular {
  border-radius: 7px;
  width: 231px;
  background-color: white;
  float: left;
  margin-right: 24px;
  padding: 17px 14px;
}

.popular h2 {
  font-size: 14px;
  color: #4a4a4a;
}

.top10 {
  counter-reset: counter;
  padding-left: 0;
  list-style: none;
}

.top10 .keyword:not(:last-child) {
  margin-bottom: 12px;
}

.top10 .keyword:before {
  content: counter(counter,decimal-leading-zero);
  counter-increment: counter;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  margin-right: 10px;
  padding: 3px 5px;
  position: relative;
  bottom: 2px;

  width: 18px;
  height: 18px;
  border-radius: 6px;
  background-color: #2391e9;
}

.top10 .keyword:nth-of-type(1n+4):before {
  background-color: #dbdbdb;
}

.top10 .keyword a {
  font-size: 14px;
  color: #4a4a4a;
  text-decoration: none;
}

.top10 .keyword a:hover {
  text-decoration: underline;
}

/* playlists */

.playlists {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
}

.playlist {
  width: 737px;
  height: 240px;
  border-radius: 7px;
  background-color: white;
  margin-bottom: 35px;
  position: relative;
  opacity: 0;
}

.pl-topic {
  position: absolute;
  top: 16px;
  left: 26px;
  text-align: center;

  width: 79px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.64;
  color: white;

  border-bottom: 1px solid white;
}

.pl-img {
  float: left;
}

.pl-info {
  float: left;
  width: 340px;
  padding: 10px 15px;
}

.pl-user-img {
  vertical-align: middle;
  margin-right: 14px;
}

.pl-title {
  display: inline-block;
  vertical-align: middle;
  width: 231px;
  font-weight: 300;
  line-height: 1.45;
}

.pl-title a {
  color: #4a4a4a;
  font-size: 20px;
  text-decoration: none;
}

.pl-title a:hover {
  text-decoration: underline;
}

.tags {
  padding: 0;
  margin: 0;

}

.tags .tag {
  display: inline;
  margin-right: 3px;
  white-space: nowrap;
}

.tags .tag a {
  color: #9b9b9b;
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.64;
}

.stats {
  vertical-align: middle;
  border-top: solid 0.3px #9b9b9b;
  padding-top: 11px;
  margin-top: 11px;
}

.stats img {
  vertical-align: middle;
  margin-right: 9px;
}

.stats span {
  vertical-align: middle;
  margin-right: 20px;

  font-size: 14px;
  font-weight: 300;
  line-height: 2.21;
  text-align: left;
  color: #4a4a4a;
}

js/script.js

$(window).on('scroll', function(){
    var o=$(window).scrollTop()+$(window).height();

    $('.playlist').each(function()
    {
        if( (Number)($(this).position().top) + ((Number)($(this).height()) / 2) < o){
            $(this).animate({opacity:"1"},2000);
        }

    }
    );
})

구현소스대로 정상동작은 하는데요, 한 가지 문제가 웹페이지를 새로 실행했을때 또는 스크롤바가 맨위에 있는상태에서 F5키를 눌러서 새로고침했을때, 스크롤 이벤트가 발생하지 않아서 플레이리스트가 안보이네요..

이걸 쉽게 고치려면 웹페이지를 시작했을때 발생하는 초기화? 이벤트가 있다면 해결이 가능할것 같은데요.

보통 웹사이트를 처음 띄었을때 동작시켜야되는 동적 기능은 어떤방식으로 처리하는지 궁금합니다.