可见部分时将标题固定在顶部

利亚姆

我试图创造一种效果,而不是当用户滚动时,我一直h1停留在窗口顶部。当父div滚动到h1之后,然后“释放”并再次正常滚动。当我的下一个section进来时,我想再次将其粘贴h1在顶部附近,依此类推。

小提琴

jQuery的

$(document).ready(function(){
    $(window).scroll(function(){
        $('section h1').addClass('fixed');
    })
})

我也尝试过:

var section = $('section');
distance = section.offset().top,
$window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
       section.find('h1').addClass('fixed');
    }
});
网络提基

您可以使用一些jQuery来做到这一点。

以下代码段计算出每个部分到窗口顶部的偏移量。当某个部分到达窗口顶部时,其标题<h1>位置将更改为position:fixed;

演示

jQuery的:

function fixTitle() {
    $('section.affix').each(function () {
        var $this = $(this);
        var offset = $this.offset().top-40;
        var scrollTop = $(window).scrollTop();

        if (scrollTop > offset) {
            $this.addClass('fixed');
        } else {
            $this.removeClass('fixed');
        }
    });
}

$(document).ready(function () {
    $(window).scroll(fixTitle);
});

CSS:

section {
    overflow:hidden;
    padding:0 20%;
    position:relative;
  text-align:justify;
}
section h1 {
    float:left;
    width:14%;
  padding-left:1.5%;
  line-height:40px;
    background:#fff;
    position:relative;
  z-index:1;
}
section .summary {
    float:right;
    width:70%;
}
.fixed h1:first-child {
    position:fixed;
    top:0;
}
h1:first-child:before{
  content:"";
  position:absolute;
  left:0;
  width:5%;
  height:100%;
  background-color:#4381B6;
  z-index:-1;


}
.fixed h1:first-child:before{
  width:100%;
  -webkit-transition:width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何将 Vuetify 对话框标题的位置固定到顶部并使按钮始终可见

来自分类Dev

将内容推送到某个位置以下:固定了顶部导航,因此可见

来自分类Dev

如何使表格标题固定在HTML表格的顶部?

来自分类Dev

Div,固定在底部,固定在顶部

来自分类Dev

按可见内容部分的比例更改标题部分的位置

来自分类Dev

是否可以将UIView的顶部固定在导航栏的底部?

来自分类Dev

将元素固定在滚动页面的顶部

来自分类Dev

滚动时如何将导航栏固定在顶部?

来自分类Dev

如何将pygame窗口固定在顶部?

来自分类Dev

将Windows即时贴固定在顶部

来自分类Dev

向下滚动到时,将导航栏固定在顶部

来自分类Dev

UITableViewcontentInset:将表格滚动到顶部时,第一个标题上方的行仍然可见

来自分类Dev

滚动带有标题的div,但当标题消失时将其固定在20px顶部

来自分类Dev

滚动带有标题的div,但当标题消失时将其固定在20px顶部

来自分类Dev

导航栏固定在顶部

来自分类Dev

将容器流体固定在固定顶部和固定底部之间

来自分类Dev

带有位置的Div:固定在移动自适应设计中不可见

来自分类Dev

向下滚动时如何使标题和导航栏都固定在顶部

来自分类Dev

将部分悬停在段落上以使部分可见

来自分类Dev

UITableCellView顶部可见线

来自分类Dev

UITableCellView顶部可见线

来自分类Dev

使部分UIView可见

来自分类Dev

如何滚动uitableview和顶部的节标题,可见并滚动到

来自分类Dev

将相对div固定在屏幕顶部

来自分类Dev

两个位置固定在顶部

来自分类Dev

如何使导航栏固定在顶部

来自分类Dev

如何使终端光标固定在顶部?

来自分类Dev

滚动后固定在顶部的导航

来自分类Dev

永久将打印机指示器固定在顶部工具栏上?

Related 相关文章

  1. 1

    如何将 Vuetify 对话框标题的位置固定到顶部并使按钮始终可见

  2. 2

    将内容推送到某个位置以下:固定了顶部导航,因此可见

  3. 3

    如何使表格标题固定在HTML表格的顶部?

  4. 4

    Div,固定在底部,固定在顶部

  5. 5

    按可见内容部分的比例更改标题部分的位置

  6. 6

    是否可以将UIView的顶部固定在导航栏的底部?

  7. 7

    将元素固定在滚动页面的顶部

  8. 8

    滚动时如何将导航栏固定在顶部?

  9. 9

    如何将pygame窗口固定在顶部?

  10. 10

    将Windows即时贴固定在顶部

  11. 11

    向下滚动到时,将导航栏固定在顶部

  12. 12

    UITableViewcontentInset:将表格滚动到顶部时,第一个标题上方的行仍然可见

  13. 13

    滚动带有标题的div,但当标题消失时将其固定在20px顶部

  14. 14

    滚动带有标题的div,但当标题消失时将其固定在20px顶部

  15. 15

    导航栏固定在顶部

  16. 16

    将容器流体固定在固定顶部和固定底部之间

  17. 17

    带有位置的Div:固定在移动自适应设计中不可见

  18. 18

    向下滚动时如何使标题和导航栏都固定在顶部

  19. 19

    将部分悬停在段落上以使部分可见

  20. 20

    UITableCellView顶部可见线

  21. 21

    UITableCellView顶部可见线

  22. 22

    使部分UIView可见

  23. 23

    如何滚动uitableview和顶部的节标题,可见并滚动到

  24. 24

    将相对div固定在屏幕顶部

  25. 25

    两个位置固定在顶部

  26. 26

    如何使导航栏固定在顶部

  27. 27

    如何使终端光标固定在顶部?

  28. 28

    滚动后固定在顶部的导航

  29. 29

    永久将打印机指示器固定在顶部工具栏上?

热门标签

归档