Question

因此，我想知道如何在页面的某个位置创建div apear并保持在完全相同的位置，直到您到达页面的特定位置

有点像他们在http://www.squarespace.com上看到的那样，你会看到一个imac屏幕，它会一直停留在屏幕上，直到你到达一个特定点

可以在不使用js的情况下完成无论哪种方式都可以让我知道怎么做？

Answer 1

我假设您的意思是当用户滚动到页面中的某个点时显示div，然后当他们滚动时消失到另一点。

使用CSS在技术上是不可能的。可能有一种方法可以让它看起来像这样，其他元素可以覆盖它，但我现在专注于用JS做这件事。

基本上，你想要

// set up limits for show/hide
var SHOW_Y = 100,
    HIDE_Y = 800;

// function to be called every time
// the page is scrolled
function scrolled() {
  if(window.scrollTop < SHOW_Y) {
    hide(this);  
  } else if(window.scrollTop < HIDE_Y) {
    show(this);
  } else {
    hide(this);
  }
}

// helper function which hides an element
function hide(element) {
  element.style.display = 'none';
}

// helper function which shows an element
function show(element) {
  element.style.display = 'block';
}

window.addEventListener('load', function() {
  var element = document.getElementById('your-element');
  window.addEventListener('scroll', scrolled.bind(element));
});

我可能会使用CSS类而不是display属性来执行此操作，以便控制元素消失和重新出现的方式，但这应该会给你一些想法。

Answer 2

您还可以使用Skrollr或ScrollMagic等脚本。

如何使div保持在同一位置然后在特定点消失

2 个答案: