个人中心
gpt4 book ai didi

javascript - 滚动浏览彼此堆叠的 div

转载 作者：搜寻专家 更新时间：2023-10-31 08:49:48 25 4
gpt4 key购买 nike

长话短说:我想滚动浏览全屏 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;
    }
};

为了让我自己更清楚，我想要实现的基本上与我发布的 fiddle 相反。如果您一直向下滚动然后开始向上滚动，这将是我想要实现但上下颠倒的效果。

提前致谢

最佳答案

更新: comment之后，request就更清晰了，看这些例子...

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

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

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

片段

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>

关于javascript - 滚动浏览彼此堆叠的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56427783/

25 4 0
文章推荐： html - 跨浏览器上的字体排版问题
文章推荐： javascript - Laravel-5.7 : How to view data in dataset chart in Laravel
文章推荐： javascript - 如何在页面加载时随机播放视频？
文章推荐： javascript - Chrome 中的原生延迟加载
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com