文章/答案/技术大牛

发布

社区首页 >问答首页 >多个粘性标题- CSS / JavaScript / AngularJS

问多个粘性标题- CSS / JavaScript / AngularJS
EN

Stack Overflow用户

提问于 2015-04-09 13:06:23

回答 2查看 4.2K关注 0票数 2

我试图为下面的场景找到一些解决方案：

Header height is all different
鼠标向下滚动
Fixed headers

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

(1)初始化

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

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

angularjs

sticky

javascript

jquery

css

回答 2

Stack Overflow用户

发布于 2015-04-09 17:17:47

嗯..。

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>

票数 6

Stack Overflow用户

发布于 2015-04-09 13:50:08

下面是一个简单的例子：

我正在计算标头的高度并设置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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29530185

复制

相似问题

问多个粘性标题- CSS / JavaScript / AngularJS
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个粘性标题- CSS / JavaScript / AngularJSEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多个粘性标题- CSS / JavaScript / AngularJS
EN