堆栈内存溢出
  繁体   English   中英

滚动中div内的多个Sticky Headers

[英]Multiple Sticky Headers inside a div on scroll

 原文  2014-11-07 03:31:11  0   5    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>

有人可以帮帮我吗。

谢谢

UPDATE

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

DEMO

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

5 个解决方案

解决方案1
 2 已采纳  2014-11-11 10:00:04

希望这是你想要的。

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代码： 

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

解决方案2
 1  2014-11-07 03:40:37

我不确定你想要达到什么目标，但我希望我能做到这一点。 如果您希望.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类中

示例： 实例 - 您可能需要调整窗口大小以便滚动

解决方案3
 1  2017-08-25 12:20:32

终于想通了......非常讨厌。 我知道我们使用新的“粘性”位置有一个更现代的解决方案，但该解决方案在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"));
    });

解决方案4
 0  2014-11-07 03:33:51

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

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

解决方案5
 0  2014-11-07 03:52:02

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

希望，你得到我的说法。

干杯!

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 具有粘性标题和水平滚动的多个表 div中的粘性元素，滚动上的绝对位置 在滚动上淡出粘性div 滚动上的粘性div 多个粘性标题 滚动后的Javascript粘性div 使用粘性导航栏滚动到div 停止 Div 上的粘性滚动（页脚） 用简单的javascript滚动的粘滞div 跟随滚动背景的粘性标题 - 纯 JS
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM