Fatal编程技术网
  • javascript/
  • Javascript 滚动条上的div中有多个粘性标题

Javascript 滚动条上的div中有多个粘性标题

javascript jquery html css

Javascript 滚动条上的div中有多个粘性标题,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我想在卷轴上显示一个粘性标题。我找到了一种在窗口顶部显示粘性标题的方法。但是我找不到在div顶部显示标题的方法 <html> <head> <style> body { margin: 0; position: relative; } .followMeBar { background: #222; border-bottom

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


身体{
保证金：0；
位置：相对位置；
}
followMeBar先生{
背景：#222；
边框底部：实心1px#111；
边框顶部：实心1px#444；
填充：1%；
位置：相对位置；
z指数：1；
}
.followMeBar.固定{
位置：固定；
排名：0；
宽度：98%；
z指数：0；
}
.followMeBar.fixed.absolute{
位置：绝对位置；
}
.集装箱{
位置：相对位置；
背景：#333；
左边距：400px；
利润上限：200px；
颜色：#fff；
宽度：400px；
高度：600px；
溢出：滚动；
}
功能粘滞标题（粘滞）{
this.load=函数（）{
粘滞物。每个（函数（）{
var thisticky=jQuery（this）.wrap（“”）；
thisticky.parent（）.height（thisticky.outerHeight（））；
jQuery.data（thisticky[0]，'pos'，thisticky.offset（）.top）；
});
}
this.scroll=函数（）{
粘滞物。每个（函数（i）{
var thisticky=jQuery（this），
nextSticky=粘滞物等式（i+1），
PrevSticy=粘性.公式（i-1），
pos=jQuery.data（thisticky[0]，'pos'）；
if（pos 0&&thisticky.offset（）.top>=jQuery.data（nextSticky[0]，'pos'）-thisticky.outerHeight（））{
thisticky.addClass（“绝对”）.css（“top”，jQuery.data（nextSticky[0]，“pos”）-thisticky.outerHeight（））；
}
}否则{
thisticky.removeClass（“固定”）；

如果（prevSticky.length>0&&jQuery（.container”）.scrollTop（）您需要在父容器上放置一个相对位置，然后在子div上放置一个“绝对”位置。这将使子div的位置保持静态，甚至是“粘性”


如果我误解了您的问题，我深表歉意。
我不确定您想要实现什么，但我希望我能做到这一点。如果您希望.followMeBar保持粘性并始终保持在屏幕上，您可以尝试更改此选项：


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


致：

在.followMeBar类中

例如：

每个
HTML
元素都是相对于祖先链中最靠近的元素定位的。因此，使父元素
相对
您可以告诉子元素相对于父元素定位，并使其
绝对
将它们从文档流中删除

希望你明白我的意思


干杯！希望这是你想要的

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



$（函数（）{
var lastScrollTop=0；
$（窗口）。滚动（函数（）{
var eTop=$（'.container'）.offset（）.top；
var wTop=$（window.scrollTop（）；
var diff=eTop-wTop；
$（'.fixed'）.css（“top”，diff）；
});
$（'.container'）。滚动（函数（事件）{
var currentScrollTop=$（this.scrollTop（）；
如果（currentScrollTop>lastScrollTop）{
log（“向下滚动”）；
$（'.header'）。每个（函数（）{
if（$（this）.hasClass（'fixed'））
{ 
var_next_header=$（this）.nextUntil（'.header'）.next（'.header'）；
如果（$（\u下一个\u标题）.length>0）
{
如果（$（this.offset（）.top+$（this.height（））>=$（下一个标题）.offset（）.top）
{
//收割台底部击中下一个收割台顶部
$（this）.removeClass（'fixed'）.addClass（'relative'）；
$（_next_header）.removeClass（'relative'）.addClass（'fixed'）；
}
}
}
}); 
} 
其他的
{
//向上滚动
$（'.header'）。每个（函数（）{
if（$（this）.hasClass（'fixed'））
{ 
var_prev_header=$（this）.prevUntil（'.header'）.prev（'.header'）；
如果（$（\u上一个\u标题）.length>0）
{

if（$（this）.offset（）.top最终解决了这个问题……非常烦人。我知道我们有一个更现代的解决方案来解决这个问题，使用新的“粘滞”位置，但这个解决方案在IE11中不起作用，因为IE11仍然相当普遍，而且我不确定它是否能将其他头向上推

我已经修改了包括OP在内的演示，使其在DIV中工作。现在我不能保证这在所有情况下都能工作，但我认为这是使用codepen提供的优雅解决方案解决此问题的一个良好开端

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



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>


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



var stickyHeaders=（函数（）{
var$parentItem；
var$胶粘物；
var load=函数（粘滞、滚动父对象）{
$parentItem=scrollParent；
//var计数=0；
if（typeof stickies===“object”&&stickies实例jQuery&&stickies.length>0）{
$stickies=stickies.each（函数（）{
var$thisticky=$（this.wrap（“”）；
var top=$thisticky.offset（）.top-$parentItem.offset（）.top；
//log（count+'top:'+top+'outerheight:'+$thisticky.outerheight（））；
//计数++；
$thisticky
大卫·达

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



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



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