个人中心
gpt4 book ai didi

javascript - 多个粘性 header - CSS/JavaScript/AngularJS

转载 作者：行者123 更新时间：2023-11-30 07:37:09 25 4
gpt4 key购买 nike

我试图为以下场景找到一些解决方案:

  1. 页眉高度完全不同
  2. 鼠标向下滚动
  3. 固定 header

有谁知道如何制作多个这样的粘性标题？

(1) 初始化

enter image description here

(2) 向下滚动(使用鼠标)

enter image description here

(3) 向下滚动(使用鼠标)

enter image description here

最佳答案

嗯...

DEMO 

$(window).scroll(function() {
  var $headers = $(".header");
  var scrollTop = $(this).scrollTop();

  if (scrollTop <= 0) {
    // reset all
    $headers.css({
      position: "relative",
      top: "0px"
    });
  } else {
    $headers.each(function(index, $el) {

      var $curHeader = $($headers).eq(index);
      var curTop = $curHeader.offset().top;
      var curHeight = $curHeader.height();

      // scroll up
      var isRelative = ($el.isFixed && scrollTop <= $el.exTop);

      // scroll down
      var isFixed = (curTop <= scrollTop);

      var position = "";
      var top = 0;

      if (isRelative) {
        // reset
        positon = "relative";
        top = 0;

        $el.isFixed = false;
      } else if (isFixed) {
        position = "fixed";
        if (0 < index) {
          for (var i = 0; i < index; i++) {
            top += $($headers).eq(i).height();
          }
        }
        scrollTop += curHeight;

        if (!$el.isFixed) {
          $el.isFixed = true;
          $el.exTop = curTop;
        }
      }

      $($el).css({
        position: position,
        top: top + "px"
      });
    });
  }
});
body {
  height: 10000px;
}
div {
  height: 200px;
  background: gray;
  width: 100%;
}

.header {
  height: 50px;
  background: green;
}

div.header:nth-child(7) {
  height: 100px;
}
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <div>content 0</div>
    <div class="header">header 1</div>
    <div>content 1</div>
    <div class="header">header 2</div>
    <div>content 2</div>
    <div class="header">header 3</div>
    <div>content 3</div>
</body>

</html>

关于javascript - 多个粘性 header - CSS/JavaScript/AngularJS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29530185/

25 4 0
文章推荐： java - 使用 Jboss/Seam 从 OpenId 获取电子邮件地址
文章推荐： java - 通过公共(public) API 导出非公共(public)类型
文章推荐： java - 用java 1.4模拟
文章推荐： java - 根据列值问题更改JTable行的背景颜色
行者123
个人简介

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

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