Question

我在一个网站中创建了一个系统，它使用单个HTML文件，用户点击页面两侧的按钮滚动内容。当然，我想在用户到达内容的任一端时隐藏按钮（即在最左边的页面上禁用左箭头）。我使用console.log()打印包含内容的left的{{1}}值，这是<div>使用jQuery创建效果的内容。但是，当我使用按钮滚动一次时，值会更改为.animate()，这已经是0px的默认CSS值。再次滚动，值会更改为<div>，这也是我滚动回第一页时的值。这意味着一旦滚动到第三页，我的按钮就会消失，从而阻碍了进一步的导航。但是，内联-99.9999px属性始终包含预期值。这些差异的原因是什么？

预先警告，Snippet 非常搞砸了。您可能需要复制并粘贴到某些本地文件中。对于那个很抱歉。 style是您应该注意的#box。谢谢！

段：

＆＃13;

<div>

＆＃13;

body {
  background-image: url("images/pinecones.JPG");
  min-height: 100%;
  margin: 0px;
  background-repeat: no-repeat;
  max-width: 100%;
  overflow-x: hidden;
}

::selection {
  background-color: green;
}

::-moz-selection {
  background-color: green;
}

footer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
  width: 100%;
  padding: 5px;
  padding-right: 0px;
  padding-left: 0px;
  font-family: monospace;
}

p {
  font-family: 'Cambria', sans-serif;
  margin: 10px;
  margin-bottom: 20px;
  text-indent: 20px;
}

div.page:hover {
  font-size: 120%;
}

h1 {
  font-family: sans-serif;
}

#box {
  position: relative;
  left: 0%;
}

.banner-text {
  text-indent: 0px;
  font-family: sans-serif;
  font-size: 30px;
  letter-spacing: 3px;
  color: white;
  margin: 0px;
  margin-top: 20px;
  margin-right: 35px;
  display: inline-block;
  float: right;
  cursor: pointer;
}

.banner-text:hover {
  font-size: 30px;
}

@media screen and (max-width: 1200px) {
  .banner-text {
    font-size: 25px;
  }
}

@media screen and (max-width: 1100px) {
  .banner-text {
    font-size: 20px;
  }
}

/* I'll need to add more progressions of this, sizing down the margin and eventually getting rid of this to go mobile. */

#banner {
  background-color: #000000;
  opacity: 0.8;
  width: 100%;
  height: 150px;
  position: absolute;
  top: 0px;
  right: 0px;
  display: block;
  z-index: -1;
}

#banner-text {
  display: block;
  position: absolute;
  left: 340px;
}

#navbar {
  position: absolute;
  left: 340px;
  top: 50px;
  color: white;
}

.nav-text {
  text-indent: 0px;
  float: left;
  margin: 0px;
  margin-right: 30px;
  margin-top: 30px;
  font-family: sans-serif;
  letter-spacing: 2px;
  font-style: italic;
  cursor: pointer;
}

.nav-text:hover {
  font-size: 120%;
  margin-right: 15px;
}

#media-box {
  position: absolute;
  right: 0px;
  z-index: 1;
  margin: 20px;
  width: 200px;
}

.media {
  float: right;
  cursor: pointer;
}

.contact-info {
  position: absolute;
  right: 0px;
  margin-top: 10px;
  margin-right: 5px;
  font-size: 14px;
  color: white;
  font-family: sans-serif;
  letter-spacing: 1px;
}

.phone {
  cursor: default;
  top: 50px;
}

.email {
  top: 80px;
  cursor: pointer;
}

#logo {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
}

.page {
  display: block;
  background-color: black;
  opacity: 0.8;
  color: white;
}

.box {
  position: absolute;
  top: 500px;
  width: 100%;
}

#title {
  position: relative;
  width: 50%;
  font-style: italic;
  font-size: 24px;
  font-family: sans-serif; /* Redundant if decide to use sans-serif elsewhere */
  letter-spacing: 2px;
}

#title-text:hover {
  font-size: 100%;
}

.arrow {
  position: fixed;
  margin: 10px;
  cursor: pointer;
  z-index: 100;
}

.left {
  left: 0px;
  visibility: hidden;
}

.right {
  right: 0px;
}

.main {
  width: 50%;
  margin: auto;
  position: relative;
  height: 300px;
}

.intro { /* Need to fix this thing not scrolling right */
  width: 50%;
  margin-left: 20px;
}

#left {
  position: relative;
  margin-left: 68px;
  width: 25%;
  height: 355px;
  right: 0px;
}

#bottom {
  width: 50%;
  position: relative;
}

/* The pages position values below */

.second {
  position: absolute;
  left: 62.5%;
}

.third {
  position: absolute;
  left: 112.5%;
}

＆＃13;

为什么这个样式值没有按预期变化？

0 个答案: