一个div先隐藏,滑动到指定位置显示,滑到他原位置时隐藏

可以使用 jQuery 来实现该效果。可以通过监听页面滚动事件，当页面滚动到指定位置时显示 div，当页面滚动到 div 原始位置时隐藏 div。

以下是实现代码：

$(window).scroll(function () {
  var scrollDistance = $(window).scrollTop();
  var targetDistance = $('#target').position().top;
  var divDistance = $('#div').position().top;
  
  if (scrollDistance >= targetDistance) {
    $('#div').show();
  } else if (scrollDistance < targetDistance && divDistance != targetDistance) {
    $('#div').hide();
  }
});

其中，`#target` 为指定位置的元素，`#div` 为需要滑动显示的元素。在初始状态下，可以将 `#div` 隐藏。

相关问题

一个div先隐藏,滑动到指定位置显示

可以使用jQuery实现此效果。首先，将该div的display属性设置为none，即隐藏该div。然后，使用jQuery的scrollTop()方法获取当前页面的滚动距离，当滚动距离达到指定位置时，使用show()方法显示该div。

以下是示例代码：

HTML：

<div id="myDiv" style="display:none;">这是要显示的内容</div>

JS：

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop(); // 获取当前页面滚动距离
  if (scrollTop >= 200) { // 当滚动距离达到200px时，显示myDiv
    $('#myDiv').show();
  }
});

在这个例子中，当页面滚动距离达到200px时，myDiv会被显示出来。

滑动到一定位置div显示背景颜色

您可以使用CSS中的伪类选择器 `:hover` 或 `:active` 来实现这个效果。具体做法是给要滑动的元素添加一个背景色，然后设置它的透明度为0，如下所示：

.element {
  background-color: #000;
  opacity: 0;
  transition: opacity .3s ease-in-out;
}

.element:hover,
.element:active {
  opacity: 1;
}

这样当鼠标悬停在元素上或者元素被点击时，它的背景色就会显示出来。您可以根据自己的需求调整元素的样式和动画效果。