Question

我需要一些帮助来编写一些jQuery代码......

我希望有一个固定的侧面板，在该面板中我希望有一个显示和隐藏的div元素，具体取决于用户滚动的位置。

示例：因此，用户位于页面顶部，左侧栏会显示＆＃34; intro＆＃34;。然后当他们向下滚动时说1000px＆＃34; intro＆＃34;淡出和＆＃34;第1节＆＃34;淡入。然后当他们向下滚动另一个1000px＆＃34;第1节＆＃34;淡出和＆＃34;第2节＆＃34;淡入。然后在向上滚动页面时会发生反向。

我只是学习jQuery所以我并不擅长制定正确的代码/语言。我现在有＃34;介绍＆＃34;淡出，第一部分消失，但我无法解决如何做其余的事情......

我假设我需要像＆gt;这样的东西1000＆amp;＆amp; ＆LT; 2000告诉它什么时候显示和隐藏，但我不确定如何正确地写它。

＆＃13;

$(window).scroll(function () {

  if ($(window).scrollTop() < 950) {
    $('#intro').fadeIn("slow");
  } else {
    $('#intro').hide();
  }

  if ($(window).scrollTop() > 1000) {
    $('#one').fadeIn("slow");
  } else {
    $('#one').hide();
  }
});

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.block {
  width: 100%;
  height: 1000px;
  background-color: #D1A2A3;
}

.block2 {
  width: 100%;
  height: 1000px;
  background-color: #866061;
}

.sideBar {
  width: 300px;
  height:  100vh;
  padding: 30px;
  background-color: #efefef;
  position: fixed;
  left: 0;
  right: 0;
}

p {
  font-size: 3em;
  color: #5D5D5D;
}

#one {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sideBar">

  <div id="intro">
    <p>INTRO</p>
  </div>

  <div id="one">
    <p>ONE</p>
  </div>

</div>

<div class="block"></div>
<div class="block2"></div>
<div class="block"></div>
<div class="block2"></div>
<div class="block"></div>
<div class="block2"></div>
<div class="block"></div>
<div class="block2"></div>
<div class="block"></div>
<div class="block2"></div>
<div class="block"></div>
<div class="block2"></div>
<div class="block"></div>
<div class="block2"></div>

＆＃13;

Answer 1

这是和示例：）

{
"manifest_version": 2,
"name": "LoopWebm",
"version": "1.0",

"description": "Adds a context menu option to videos that allows you to open them in a new tab or window (based on User Preferences), where it will play and auto-loop. Intended for use with .webm videos.",

"icons": {
    "16": "icons/loop16.png",
    "32": "icons/loop32.png",
    "48": "icons/loop48.png"
},


"background": {
    "scripts": ["background.js"]
},


"permissions": [
"contextMenus",
"tabs",
"activeTab",
"<all_urls>"
]


}

在滚动上显示和隐藏div

1 个答案: