多个粘滞标题- CSS / JavaScript / AngularJS

oo7oh9g9 于 2023-01-19 发布在 Java

关注(0)|答案(3)|浏览(138)

我试图为以下场景找到一些解决方案：
1.顶盖高度完全不同
1.鼠标向下滚动
1.固定标头
有人知道如何像这样制作多个粘头吗？
(1)初始化

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

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

JavaScript

来源：https://stackoverflow.com/questions/29530185/multiple-sticky-headers-css-javascript-angularjs

3条答案

按热度按时间

ffscu2ro1#

嗯...
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>

赞(0）回复(0）举报 2023-01-19

cuxqih212#

下面是一个简单的例子：
我正在计算标头的高度并设置top属性。

- 一个

$(window).scroll(function () {
var $headers = $(".header");
if ($(this).scrollTop() > 50) {
    $headers.each(function (index, el) {
        var height = 0;
        if (index == 0) {
            height = "0px";
        } else {
            for ( var x = index - 1; x >= 0; x--) {
                height += $headers.eq(x).height();
            }
        }
        height = height + "px";
        $(el).css({
            "position": "fixed",
                "top": height
        });
    });
} else {
    $headers.css({
        position: "relative",
        top: "0"
    });
}
});

body {
  height: 10000px;
}
div {
  height: 100px;
  background: green;
  width: 100%;
}

.header {
  height: 50px;
  background: red;
}
.header:first-child {
  height: 20px;
}
div.header:nth-child(5) {
  height: 100px;
}

<!DOCTYPE html>
<html>

<head>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
</head>

<body>
    <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>

赞(0）回复(0）举报 2023-01-19

5t7ly7z53#

仅使用css编码pen-FollowMe Headers

body {
  margin:0;
  min-height:200vh;
  border:2px solid;
}
.first {
  height:50px;
  background:red;
  height: 10rem;
}

.second {
  height:50px;
  background:blue;
  height: 10rem;
  
}
.third {
  height:50px;
  background:green;
  height: 10rem;
  
}

.stickyContainer {
  .sticky {
    position: sticky;
    top: 0;
    height: 2rem;
    background: white;
  }
}

<div class="first stickyContainer">
  <div class="sticky"><h1>1</h1></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
  </div>
<div class="second stickyContainer">
  <div class="sticky"><h1>2</h1></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

<div class="third stickyContainer">
  <div class="sticky"><h1>3</h1></div>
  <p>lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
</div>

赞(0）回复(0）举报 2023-01-19

我来回答

多个粘滞标题- CSS / JavaScript / AngularJS

3条答案

相关问题

热门标签

最新问答