Question

长话短说：我想滚动浏览全屏div。通过查看先前的问题，我发现这与我的需求非常接近，但是有所更改。 https://jsfiddle.net/naqk671s/

我不想将div＃1固定在其顶部，而是将＃2固定在其顶部，而是让＃1向上并露出＃2。

我对jQuery的信心不是很大，因此我尝试更改一些值，但我把它变得更糟。您认为只需进行少量更改就能达到结果吗？还是我应该从头开始？

under = function(){
    if ($window.scrollTop() < thisPos) {
        $this.css({
            position: 'absolute',
            top: ""
        });
        setPosition = over;
    }
};

over = function(){
    if (!($window.scrollTop() < thisPos)){
        $this.css({
            position: 'fixed',
            top: 0
        });
        setPosition = under;
    }
};

为了使自己更加清楚，我试图实现的目标基本上与我张贴的小提琴相反。如果您一直向下滚动然后开始向上滚动，那将是我想要实现的效果，但是倒过来。

预先感谢

Answer 1

更新：评论后，请求变得更加清晰，请看这些示例...

纯CSS： https://jsfiddle.net/9k8nfetb/

参考：https://www.w3schools.com/howto/howto_css_sticky_element.asp

jQuery ：https://jsfiddle.net/kajwhnc1/

参考：multiple divs with fixed position and scrolling

另一个 jQuery ：https://jsfiddle.net/6da3e41f/

参考：How to make div fixed after you scroll to that div?

代码段

var one = $('#one').offset().top;
var two = $('#two').offset().top;
var three = $('#three').offset().top;
var four = $('#four').offset().top;

$(window).scroll(function() {

  var currentScroll = $(window).scrollTop();

  if (currentScroll >= 0) {
    $('#one').css({
      position: 'fixed',
      top: '0',
    });
  } else {
    $('#one').css({
      position: 'static'
    });
  }

  if (currentScroll >= two) {
    $('#two').css({
      position: 'fixed',
      top: '26px',
    });
  } else {
    $('#two').css({
      position: 'static'
    });
  }

  if (currentScroll >= three) {
    $('#three').css({
      position: 'fixed',
      top: '52px',
    });
  } else {
    $('#three').css({
      position: 'static'
    });
  }

  if (currentScroll >= four) {
    $('#four').css({
      position: 'fixed',
      top: '78px',
    });
  } else {
    $('#four').css({
      position: 'static'
    });
  }
});

body,
html {
  height: 200%;
}

#one,
#two,
#three,
#four {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

#one {
  top: 0;
  background-color: aqua;
}

#two {
  top: 100%;
  background-color: red;
}

#three {
  top: 200%;
  background-color: #0a0;
}

#four {
  top: 300%;
  background-color: #a05;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<body>
  <div id="one">ONE</div>
  <div id="two">TWO TWO</div>
  <div id="three">THREE THREE THREE</div>
  <div id="four">FOUR FOUR FOUR FOUR</div>
</body>

滚动浏览彼此堆叠的div

1 个答案: