javascript - 滚动 div 内的多个粘性标题

标签 javascript jquery html css

我想在滚动条上显示一个粘性标题。我找到了一种在窗口顶部显示粘性标题的方法。但是我找不到在 div 顶部显示标题的方法。

<html>
<head>
    <style>
        body {
        margin: 0;
        position: relative;
        }
        .followMeBar {
            background: #222;
            border-bottom: solid 1px #111;
            border-top: solid 1px #444;
            padding: 1%;
            position: relative;
            z-index: 1;
        }
        .followMeBar.fixed {
            position: fixed;
            top: 0;
            width: 98%;
            z-index: 0;
        }
        .followMeBar.fixed.absolute {
            position: absolute;
        }
        .container{
            position: relative;
            background: #333;
            margin-left: 400px;
            margin-top: 200px;
            color: #fff;    
            width: 400px;
            height: 600px;
            overflow: scroll;
        }

    </style>
    <script src="jquery-1.11.1.min.js" type="text/javascript"></script>
    <script>
        function stickyTitles(stickies) {

            this.load = function() {

              stickies.each(function(){

                    var thisSticky = jQuery(this).wrap('<div class="followWrap" />');
                        thisSticky.parent().height(thisSticky.outerHeight());

                    jQuery.data(thisSticky[0], 'pos', thisSticky.offset().top);

              });
        }

        this.scroll = function() {

              stickies.each(function(i){                

                    var thisSticky = jQuery(this),
                          nextSticky = stickies.eq(i+1),
                          prevSticky = stickies.eq(i-1),
                          pos = jQuery.data(thisSticky[0], 'pos');

                    if (pos <= jQuery('.container').scrollTop()) {

                          thisSticky.addClass("fixed");

                          if (nextSticky.length > 0 && thisSticky.offset().top >= jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight()) {

                                thisSticky.addClass("absolute").css("top", jQuery.data(nextSticky[0], 'pos') - thisSticky.outerHeight());

                          }

                    } else {

                          thisSticky.removeClass("fixed");

                          if (prevSticky.length > 0 && jQuery(".container").scrollTop() <= jQuery.data(thisSticky[0], 'pos')  - prevSticky.outerHeight()) {

                                prevSticky.removeClass("absolute").removeAttr("style");

                          }

                    }
            });         
    }
}

jQuery(document).ready(function(){

        var newStickies = new stickyTitles(jQuery(".followMeBar"));

        newStickies.load();

        jQuery(".container").on("scroll", function() {

              newStickies.scroll();

        });
});
    </script>
</head>
<body>
<div class="container">
  <div class="followMeBar">a</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">b</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">c</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">d</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">e</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">f</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">g</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">h</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">i</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">j</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">k</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">l</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">m</div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="followMeBar">n</div>
</div>
</body>
</html>

谁能帮帮我。

谢谢

更新

我希望这个效果显示在容器 div 中

演示

http://codepen.io/chrissp26/pen/vfgwb

最佳答案

希望这就是您想要的。

CSS 代码:

  .container{
                position: absolute;
                background: #333;
                left: 400px;
                top: 200px;
                color: #fff;    
                width: 400px;
                height: 600px;
                overflow: scroll;
            }
            .header {
                background-color:#CCC;
                width:100%;
                top:0;
                left:0;
                width: 400px;
            }

            .header h2 {
                margin:20px;
            }

            .fixed {
                top: 200px;
                left: 400px;
                position:fixed;

            }

            .relative {
                position:static;
            }

            #header1_content {
                margin-top:80px;
            }

J查询代码:

$(function(){
        var lastScrollTop = 0;

        $(window).scroll(function(){
            var eTop = $('.container').offset().top;
            var wTop = $(window).scrollTop();
            var diff = eTop - wTop;
            $('.fixed').css("top", diff);
        });


    $('.container').scroll(function(event){
       var currentScrollTop = $(this).scrollTop();
       if (currentScrollTop > lastScrollTop){
           console.log('scrolling down');
            $('.header').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _next_header = $(this).nextUntil('.header').next('.header');
                    if($(_next_header).length > 0)
                    {
                        if(($(this).offset().top + $(this).height()) >= $(_next_header).offset().top)
                        {
                            // Bottom of header hit top of next header
                            $(this).removeClass('fixed').addClass('relative');
                            $(_next_header).removeClass('relative').addClass('fixed');
                        }
                    }
                }
            }); 
        } 
        else 
        {
            // Scrolling up
            $('.header').each(function(){
                if($(this).hasClass('fixed'))
                { 
                    var _prev_header = $(this).prevUntil('.header').prev('.header');
                    if($(_prev_header ).length > 0)
                    {
                        if($(this).offset().top <= ($('#' + $(_prev_header).attr('id') + '_content').offset().top + $(this).height()))
                        {
                            // Top of header hit bottom of previous content box
                            $(this).removeClass('fixed').addClass('relative');
                            $(_prev_header).removeClass('relative').addClass('fixed');
                        }
                    }
                }
            }); 
        }
        lastScrollTop = currentScrollTop;
    });
});

HTML代码:

<div class="container">
  <div id="header1" class="header fixed">
    <h2>Header1</h2>
</div>
<div id="header1_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor luctus sem et varius. In blandit massa nec risus aliquam in ornare purus blandit. Etiam auctor erat a tortor commodo rhoncus eleifend in est. Aliquam sed tincidunt felis. Integer tristique turpis sit amet nunc consectetur iaculis. Proin velit orci, luctus vel varius ac, bibendum eget elit. Duis mollis orci a augue porttitor suscipit. Fusce ornare nisi sit amet purus congue volutpat. In nec ligula urna, eget ultricies tortor. Cras quis metus id nibh tempor sagittis a nec sem. Aliquam tincidunt dui sit amet sapien vehicula sit amet volutpat arcu consectetur. Fusce fringilla diam eget turpis porta non adipiscing urna viverra. Fusce neque justo, blandit in volutpat sed, pretium non dolor. Integer turpis lectus, euismod at pharetra suscipit, molestie porta justo. Vivamus pellentesque aliquam tellus, vitae laoreet nunc laoreet quis. Duis vel justo tellus.</p>

</div>


<div id="header2" class="header relative">
    <h2>Header2</h2>
</div>
<div id="header2_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor luctus sem et varius. In blandit massa nec risus aliquam in ornare purus blandit. Etiam auctor erat a tortor commodo rhoncus eleifend in est. Aliquam sed tincidunt felis. Integer tristique turpis sit amet nunc consectetur iaculis. Proin velit orci, luctus vel varius ac, bibendum eget elit. Duis mollis orci a augue porttitor suscipit. Fusce ornare nisi sit amet purus congue volutpat. In nec ligula urna, eget ultricies tortor. Cras quis metus id nibh tempor sagittis a nec sem. Aliquam tincidunt dui sit amet sapien vehicula sit amet volutpat arcu consectetur. Fusce fringilla diam eget turpis porta non adipiscing urna viverra. Fusce neque justo, blandit in volutpat sed, pretium non dolor. Integer turpis lectus, euismod at pharetra suscipit, molestie porta justo. Vivamus pellentesque aliquam tellus, vitae laoreet nunc laoreet quis. Duis vel justo tellus.</p>


</div>

<div id="header3" class="header relative">
    <h2>Header3</h2>
</div>
<div id="header3_content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor luctus sem et varius. In blandit massa nec risus aliquam in ornare purus blandit. Etiam auctor erat a tortor commodo rhoncus eleifend in est. Aliquam sed tincidunt felis. Integer tristique turpis sit amet nunc consectetur iaculis. Proin velit orci, luctus vel varius ac, bibendum eget elit. Duis mollis orci a augue porttitor suscipit. Fusce ornare nisi sit amet purus congue volutpat. In nec ligula urna, eget ultricies tortor. Cras quis metus id nibh tempor sagittis a nec sem. Aliquam tincidunt dui sit amet sapien vehicula sit amet volutpat arcu consectetur. Fusce fringilla diam eget turpis porta non adipiscing urna viverra. Fusce neque justo, blandit in volutpat sed, pretium non dolor. Integer turpis lectus, euismod at pharetra suscipit, molestie porta justo. Vivamus pellentesque aliquam tellus, vitae laoreet nunc laoreet quis. Duis vel justo tellus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor luctus sem et varius. In blandit massa nec risus aliquam in ornare purus blandit. Etiam auctor erat a tortor commodo rhoncus eleifend in est. Aliquam sed tincidunt felis. Integer tristique turpis sit amet nunc consectetur iaculis. Proin velit orci, luctus vel varius ac, bibendum eget elit. Duis mollis orci a augue porttitor suscipit. Fusce ornare nisi sit amet purus congue volutpat. In nec ligula urna, eget ultricies tortor. Cras quis metus id nibh tempor sagittis a nec sem. Aliquam tincidunt dui sit amet sapien vehicula sit amet volutpat arcu consectetur. Fusce fringilla diam eget turpis porta non adipiscing urna viverra. Fusce neque justo, blandit in volutpat sed, pretium non dolor. Integer turpis lectus, euismod at pharetra suscipit, molestie porta justo. Vivamus pellentesque aliquam tellus, vitae laoreet nunc laoreet quis. Duis vel justo tellus.</p>
</div>
</div>

关于javascript - 滚动 div 内的多个粘性标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26793590/

上一篇：javascript - 谷歌地图 Javascript 部分导致文本变为粗体

下一篇：html - 2 列内容不同，但高度相同

相关文章：

javascript - 使用 React Router v6 渲染 React 组件变量

javascript - 对 div 元素进行动画处理，改变其在 div 列表中的位置

javascript - 如何在不知道元素 ID 的情况下单独替换元素？

javascript - window.getSelection() 忽略某些标签

javascript - Microsoft Jscript Angular 未定义

javascript - 用于从 URL 中提取客户/订单号的正则表达式

jquery - 迭代 Select 选项时出现 Python Selenium StaleElementReferenceException

jquery - CSS优先级重要吗？

javascript - 标签和输入字段在同一行

html - 在移动设备上检查时 Div 内容会拉伸(stretch)

©2024 IT工具网  联系我们