Question

我有一个固定的导航箭头，它的操作是正确的，直到它越过绝对元素并向左滑动动画，这时我的“固定”箭头与动画一起出现，从屏幕上消失了。

我在相对容器中有两个绝对div，当用户向上滚动到那个位置时，两个div分别从屏幕的左侧和右侧移出。触发动画后，我的导航箭头随之下降。

//this is my scss

/*******
 ARROW
********/

@import '../../scss/variables';

.arrow{
display: block;
position: fixed;
 right: 15px;
 bottom: 15px;
  svg{
    fill: #fff;
    width:50px;
  }
}
.my_bounce {
  animation-name: my_bounce;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}

/***********
BOXES
************/
.about_cont{
  background: url('../../images/about-movil.jpg') top center;
  background-size: cover;
  display: flex;
  height: 100vh;
  position: relative;
}
.about_boxes{
  display: flex;
  width: 50vw;
  align-items: center;
  font-family: 'Panton';
  position: absolute;
  height: 100vh;;
}
#about_box_1{
  justify-content: flex-end;
  background: $sec;
  left: 0;
  p{
    font-size: 2.5rem;
  }
}
#about_box_2{
  color: #fff;
  background: $prim;
  right: 0;
 p{
   font-size: 2.5rem;
  }
}

有人知道哪里出了问题吗？

Answer 1

没有HTML文件，我们无法分辨该代码。HTML文件与CSS文件有关

Answer 2

由于我们看不到您的html，因此无法确定问题是什么，但是我很确定添加

import java.util.Comparator;
import java.util.HashSet;
import java.util.Random;
import java.util.Set;
import java.util.function.Consumer;
import java.util.function.Function;
import java.util.stream.Collector;

class PreSortOrderedGrouper {

    public static void main(String[] args) {

        Function<Double, Long> myKeyExtractor =
                (dblObj) -> Long.valueOf(
                (long)(Math.floor(dblObj.doubleValue()*10.0)));
        Random simpleRand = new Random(20190527L);
        Consumer<Set<Double>> groupProcessor =
                (grp) -> System.out.println(grp);
        simpleRand.doubles(100).boxed().sorted(
                Comparator.comparing(myKeyExtractor)).
                collect(Collector.of(HashSet<Double>::new,
                (set, dblObj) -> {
                    if (set.isEmpty() || myKeyExtractor.apply(set.iterator().
                            next()) == myKeyExtractor.apply(dblObj)) {
                        set.add(dblObj);
                    } else {
                        groupProcessor.accept(set);
                        set.clear();
                        set.add(dblObj);
                    }
                },
                (setOne, setTwo) -> {
                    throw new UnsupportedOperationException();
                },
                (finalSet) -> {
                    groupProcessor.accept(finalSet);
                    return Integer.valueOf(0);
                }));
    }
}

按箭头即可解决问题。如果这样不起作用，请尝试更大的数量。

固定元素在另一个绝对值之上时会丢失

2 个答案: