Question

我想在滚动条上显示一个粘性标题。我找到了一种在窗口顶部显示粘性标题的方法。但我找不到在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

Answer 1

希望这是你想要的。

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;
            }

Jquery代码：

$(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 code：

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

Answer 2

我不确定你想要达到什么目标，但我希望我能做到这一点。如果你想要.followMeBar是粘性的并且总是留在屏幕上，你可以尝试改变它：

.followMeBar {
        background: #222;
        border-bottom: solid 1px #111;
        border-top: solid 1px #444;
        padding: 1%;
        position: relative;
        z-index: 1;
    };

为：

.followMeBar {
        background: #222;
        border-bottom: solid 1px #111;
        border-top: solid 1px #444;
        padding: 1%;
        position: fixed;
        z-index: 1;
    }

.followMeBar类

实施例： Live example - you might need to resize the window so you can scroll

Answer 3

终于想通了......非常讨厌。我知道我们有一个更现代的解决方案，使用新的＆＃34;粘性＆＃34;位置，但该解决方案在IE11中不起作用，这仍然相当普遍，而且我不确定它是否可以推动其他标题。

我已经修改了包含OP的演示http://codepen.io/chrissp26/pen/vfgwb，以便在DIV内部工作。现在我不能保证这会在所有情况下都有效，但我认为用codepen提供的优雅解决方案解决这个问题是一个很好的开端。

请回复此解决方案的任何改进。

https://jsfiddle.net/e9ttk9c3/

<强> HTML

<header>header stuff</header>
<div id="SearchResultsDiv" style="width: 500px; height: 400px; overflow:auto;" class="whitebackground">
<div style="">
<div class="followMeBar">A</div>
<div>kewljrkljwerlkjwejlrkwejrlk</div>
<div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div>
                   <div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div>
                   <div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div>
                   <div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div><div>kewljrkljwerlkjwejlrkwejrlk</div>
<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>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">O</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">P</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">Q</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">R</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">S</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">T</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">U</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">V</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">W</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">X</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">Y</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="followMeBar">Z</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<footer>footer stuff</footer>

<强> CSS

.followWrap {
    width: 194px;
}
.followMeBar {
  background: #e64a19;
  padding: 10px 20px;
  position: relative;
  z-index: 1;
  color: #fff;
  width: inherit;
}

.followMeBar.fixed {
  position: fixed;
  /*top: 0;*/
  width: 233px;
  box-sizing: border-box;
  z-index: 0;
}

.followMeBar.fixed.absolute {
  position: absolute;
}

<强>的Javascript

    var stickyHeaders = (function () {
        var $parentItem;
        var $stickies;
        var load = function (stickies, scrollParent) {
            $parentItem = scrollParent;
            //var count = 0;
            if (typeof stickies === "object" && stickies instanceof jQuery && stickies.length > 0) {
                $stickies = stickies.each(function () {
                    var $thisSticky = $(this).wrap('<div class="followWrap" />');
                    var top = $thisSticky.offset().top - $parentItem.offset().top;

                    //console.log(count + ' top: ' + top + ' outerheight: ' + $thisSticky.outerHeight());
                    //count++;
                    $thisSticky
                        .data('originalPosition', top)
                        .data('originalHeight', $thisSticky.outerHeight())
                          .parent()
                          .height($thisSticky.outerHeight());
                });
                scrollParent.off('scroll.stickies').on("scroll.stickies", function () {
                    _whenScrolling();
                });
                //$window.off("scroll.stickies").on("scroll.stickies", function () {
                //    _whenScrolling();
                //});
            }
        };
        var _whenScrolling = function () {
            $stickies.each(function (i) {
                var $thisSticky = $(this);
                var $stickyPosition = $thisSticky.data('originalPosition');
                if ($stickyPosition <= $parentItem.scrollTop()) {
                    //console.log('add $stickyPosition = ' + $stickyPosition + ' $parentItem.scrollTop() = ' + $parentItem.scrollTop());
                    //console.log($thisSticky);

                    var $nextSticky = $stickies.eq(i + 1);

                    //console.log($nextSticky.data('originalPosition') + ' - ' + $thisSticky.data('originalHeight'));
                    var $nextStickyPosition = $nextSticky.data('originalPosition') - $thisSticky.data('originalHeight');
                    //console.log('$nextStickyPosition= ' + $nextStickyPosition);

                    var top = $parentItem.offset().top;
                    if ($thisSticky.hasClass('absolute'))
                        return;
                    $thisSticky.addClass("fixed").css('top', top);//('style', 'top: ' + top + 'px !important');

                    //console.log($nextStickyPosition);
                    if ($nextSticky.offset() == undefined)
                        return;

                    var thisStickyTop = ($thisSticky.offset().top - $parentItem.offset().top) + $thisSticky.data('originalHeight');
                    //var thisStickyTop = ($thisSticky.offset().top - $parentItem.offset().top);
                    /*WORKS!!*/var nextStickyTop = ($nextSticky.offset().top - $parentItem.offset().top);// + $thisSticky.data('originalHeight');

                    //console.log('$thisSticky.offset().top: ' + thisStickyTop);
                    //console.log('thisStickyTop: ' + thisStickyTop + ' and nextStickyTop: ' + nextStickyTop);
                    if ($nextSticky.length > 0 && thisStickyTop >= nextStickyTop) {
                        console.log('STOP!!!!!');
                        //debugger;//85/86
                        //$nextSticky.position().top - nextStickyTop
                        var newTop = $nextSticky.position().top - nextStickyTop;
                        $thisSticky.addClass("absolute").css("top", newTop);//nextStickyTop);
                        //$thisSticky.addClass("absolute").css('top', '');//.removeAttr("style");//.css("top", $nextStickyPosition);
                        //$thisSticky.addClass("absolute").removeAttr("style");//.css("top", 34);
                        //$thisSticky.css('top', '');
                    }
                } else {
                    //console.log('remove');
                    var $prevSticky = $stickies.eq(i - 1);
                    $thisSticky.removeClass("fixed").removeAttr("style");

                    var thisStickyTop = $thisSticky.offset().top - $parentItem.offset().top;
                    console.log('thisStickyTop: ' + thisStickyTop + ' =  $thisSticky.offset().top: ' + $thisSticky.offset().top + ' - $parentItem.offset().top: ' + $parentItem.offset().top);
                    //console.log($thisSticky.offset().top + ' - ' + $parentItem.offset().top);
                    //console.log("$parentItem.scrollTop() = " + $parentItem.scrollTop() + " and thisStickyTop = " + thisStickyTop);
                    //console.log($thisSticky);
                    //var thisStickyTop = $thisSticky.data('originalPosition') - $thisSticky.data('originalHeight');

                    //var thisStickyTop = $nextSticky.position().top - nextStickyTop;
                    if ($prevSticky.length > 0 && $parentItem.scrollTop() <= thisStickyTop) {
                        console.log('STOP!!! removeClassremoveClassremoveClassremoveClassremoveClass');
                        $prevSticky.removeClass("absolute").removeAttr("style");
                    }
                }
            });
        };

        return {
            load: load
        };
    })();

    $(function () {
        stickyHeaders.load($(".followMeBar"), $("#SearchResultsDiv"));
    });

Answer 4

您需要在父容器上放置一个相对位置，然后在子div上放置一个“绝对”位置。这将使子div的位置保持静止甚至“粘”。

如果我误解你的问题，我道歉。

Answer 5

每个HTML元素相对于祖先链中最接近的定位元素定位。因此，使父元素relative可以告诉子元素相对于父元素的位置，并使它们absolute将它们从文档流中取出。

希望，你能说出我的话。

干杯！

滚动中div内的多个Sticky Headers

5 个答案: