CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Anderson
Anderson

Reputation: 51

Multiple Sticky Headers inside a div on scroll

I want to display a sticky header on scroll. I found a way to display the sticky header on top of the window. But I cannot find a way to display the header on top of the 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>

Can some one please help me.

Thank You

UPDATE

I want this effect to show inside the container div

DEMO

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

Upvotes: 4

Views: 3067

Answers (5)

spyder1329
spyder1329

Reputation: 755

Finally figured this out....very annoying. I know we have a more modern solution to this problem using the new "sticky" position but that solution doesn't work in IE11 which is still fairly common, plus I'm not sure it works to push other headers up.

I've modified the demo the OP included, http://codepen.io/chrissp26/pen/vfgwb, to work inside of a DIV. Now I cannot promise this will work in all cases but I think it's a great start to solving this problem with the elegant solution provided by codepen.

Please reply with any improvements to this solution.

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

Upvotes: 1

Tharindu Kumara
Tharindu Kumara

Reputation: 4458

Hope this is what you wanted.

CSS code:

  .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 Code:

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

Upvotes: 2

vivek
vivek

Reputation: 2857

Every HTML element is positioned relative to the most nearest positioned element in the ancestor chain. So, making the parent element relative you can tell the child element to position relative to that parent and making them absolute will take them out of the document flow.

Hope, you get my saying.

Cheers!

Upvotes: 0

Roco CTZ
Roco CTZ

Reputation: 1117

I am not really sure what you want to achieve, but I hope I get this right. If you want the .followMeBar to be sticky and always stay on the screen you can try changing this:

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

to:

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

in the .followMeBar class

Example: Live example - you might need to resize the window so you can scroll

Upvotes: 1

Jonathon Hibbard
Jonathon Hibbard

Reputation: 1546

You'll need to put a relative position on the parent container, and then an "absolute" position on the child div. This will keep the child div's position static and even "sticky".

If I'm misunderstanding your question I apologize.

Upvotes: 0

Related Questions