创建一个导航栏，包含影院、电影和个人中心三个选项，这个导航栏距离页面顶部200px,当导航栏滚动到页面顶部时，会自动吸附在顶部不会消失。

好的，可以通过以下HTML和CSS代码实现：

<!-- navbar.html -->
<div id="navbar">
  <ul>
    <li><a href="#">影院</a></li>
    <li><a href="#">电影</a></li>
    <li><a href="#">个人中心</a></li>
  </ul>
</div>
<div id="content">
  <!-- 此处为页面主体内容 -->
</div>

/* navbar.css */
#navbar {
  position: relative;
  top: 200px;
  background-color: #f2f2f2;
  padding: 10px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#navbar ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}

#navbar li {
  margin: 0 20px;
}

#navbar a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

#navbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

这段代码创建了一个导航栏，包含三个选项：影院、电影和个人中心。导航栏初始状态距离页面顶部200px，当页面滚动到导航栏顶部时，导航栏会自动吸附在顶部不会消失。CSS代码中的.fixed类定义了导航栏固定在页面顶部的样式，当页面滚动到导航栏顶部时，通过JavaScript代码动态添加.fixed类即可实现导航栏固定的效果。

// navbar.js
window.addEventListener("scroll", function() {
  var navbar = document.getElementById("navbar");
  var content = document.getElementById("content");
  if (window.pageYOffset >= navbar.offsetTop) {
    navbar.classList.add("fixed");
    content.style.paddingTop = navbar.offsetHeight + "px";
  } else {
    navbar.classList.remove("fixed");
    content.style.paddingTop = 0;
  }
});

这段JavaScript代码监听窗口的滚动事件，当滚动距离大于等于导航栏距离页面顶部的距离时，通过添加.fixed类实现导航栏固定。同时，为了避免页面内容被导航栏遮挡，需要设置页面主体内容的paddingTop值为导航栏的高度。