滚动到后,如何使div停留在屏幕顶部?


305

我想创建一个div,它位于内容块的下面,但是一旦页面滚动到足以接触其顶部边界的位置,它就会固定在适当的位置并随页面滚动。


5
截至2014年6月,Sticky-kit jQuery插件是最简单的选项之一,为入门和许多功能提供了极低的障碍。如果您正在寻找一种快速入门的简便方法,那是一个很好的起点。
user456584 2014年


32
position: sticky; top:0;在2017
Hart

9
废话,那position: sticky;东西很神奇。
tscizzle

Answers:


259

您可以简单地使用css,将元素定位为fixed

.fixedElement {
    background-color: #c0c0c0;
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
}

编辑:您应该将元素的位置设为绝对,一旦滚动偏移量到达元素,则应将其更改为fixed,并将顶部位置设置为零。

您可以使用scrollTop函数检测文档的顶部滚动偏移量:

$(window).scroll(function(e){ 
  var $el = $('.fixedElement'); 
  var isPositionFixed = ($el.css('position') == 'fixed');
  if ($(this).scrollTop() > 200 && !isPositionFixed){ 
    $el.css({'position': 'fixed', 'top': '0px'}); 
  }
  if ($(this).scrollTop() < 200 && isPositionFixed){
    $el.css({'position': 'static', 'top': '0px'}); 
  } 
});

当滚动偏移量达到200时,该元素将固定在浏览器窗口的顶部,因为它的位置固定。


4
不能实现我的目标。我希望该元素从页面顶部下方200px开始(以便为其他内容留出空间),然后在用户向下滚动时固定在顶部。
evanr

3
您的修改确实确实满足了现在的问题需求,但是当页面再次滚动回到顶部时,您仍然遇到问题。您可以在到达元素scrollTop之后将其存储在某个位置,然后当页面再次到达该位置时(向上滚动时)将css更改回默认值...可能最好再使用.toggleClass做到这一点……
Sander

9
当使用with时,这几乎是什么,但是当is窗口滚动回到顶部时,我确实必须删除固定位置。 if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed') { $('.fixedElement').css({'position': 'static', 'top': '0px'}); }
Derrick Petzold 2012年

1
@DerrickPetzold我将其输入答案,非常重要的东西:)
MarioDS 2014年

1
new example您提供的链接非常清晰明了,我什至看不到!-_-
sohaiby,2015年

245

您已经在Google Code的问题页面和(仅在最近)Stack Overflow的编辑页面上看到了此示例。

向上滚动时,CMS的答案不会还原位置。这是Stack Overflow偷偷偷偷的代码:

function moveScroller() {
    var $anchor = $("#scroller-anchor");
    var $scroller = $('#scroller');

    var move = function() {
        var st = $(window).scrollTop();
        var ot = $anchor.offset().top;
        if(st > ot) {
            $scroller.css({
                position: "fixed",
                top: "0px"
            });
        } else {
            $scroller.css({
                position: "relative",
                top: ""
            });
        }
    };
    $(window).scroll(move);
    move();
}
<div id="sidebar" style="width:270px;"> 
  <div id="scroller-anchor"></div> 
  <div id="scroller" style="margin-top:10px; width:270px"> 
    Scroller Scroller Scroller
  </div>
</div>

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script> 

和一个简单的现场演示

新兴的,无脚本的替代方法是position: sticky,Chrome,Firefox和Safari支持该方法。请参阅HTML5Rocks演示文章以及Mozilla docs


3
由于某种原因,{scroll:false}给了我一些问题(jQuery 1.6.2)。似乎没有它就可以工作。从链接的演示。知道是否有用吗?
艾迪

我对此有很多麻烦,因为我一生都无法复制,我什至尝试复制实时演示并且无法正常工作。任何人都可以链接到提供逐步说明的教程吗?
Trevor Dupp 2011年

2
当我使用与演示版(1.3.2)相同版本的jQuery时,这似乎工作得很好。在某些时候,offset必须停止接受对象作为输入api.jquery.com/offset。@Eddie使用当前的jQuery,您的修改应该是安全的。
Graeme

1
是否有任何理由,你不能代替var d = $("#scroller-anchor").offset().top;var d = $("#sidebar").offset().top;,摆脱空卷轴锚定格的所有在一起吗?这是我的叉子,展示了我在说什么。
Mike Deck 2012年

@MikeDeck我怀疑如果有边距或填充,您希望能够控制滚动条相对于容器的位置。
Josh Lee

72

自2017年1月和Chrome 56发行以来,大多数常用的浏览器都支持position: stickyCSS中的属性。

#thing_to_stick {
  position: sticky;
  top: 0px;
}

在Firefox和Chrome中帮了我大忙。

在Safari中,您仍然需要使用position: -webkit-sticky

Polyfill可用于Internet Explorer和Edge;https://github.com/wilddeer/stickyfill似乎是一个不错的选择。


5
当今大多数常用浏览器都支持此功能。其次,我更喜欢一个解决方案,该解决方案可以简化为两行代码,成为需要自定义Javascript的版本。而且它也是面向未来的。如果您担心浏览器的兼容性,请使用polyfill。
Colin't Hart

1
没有比这容易的了:)

1
我想在此注释中添加z-index:99999 ;,因为如果不在顶部,则将首先呈现其他内容。但这应该是公认的解决方案。
dayanrr91 '19

只需将其包装在具有id =“ thing_to_stick”的div中
Anton,

简单易用的解决方案。在我的情况下,它比其他解决方案要好。
fsevenm

33

我遇到了与您相同的问题,最终制作了一个jQuery插件来解决它。它实际上解决了人们在此处列出的所有问题,并且还添加了一些可选功能。

选件

stickyPanelSettings = {
    // Use this to set the top margin of the detached panel.
    topPadding: 0,

    // This class is applied when the panel detaches.
    afterDetachCSSClass: "",

    // When set to true the space where the panel was is kept open.
    savePanelSpace: false,

    // Event fires when panel is detached
    // function(detachedPanel, panelSpacer){....}
    onDetached: null,

    // Event fires when panel is reattached
    // function(detachedPanel){....}
    onReAttached: null,

    // Set this using any valid jquery selector to 
    // set the parent of the sticky panel.
    // If set to null then the window object will be used.
    parentSelector: null
};

https://github.com/donnyv/sticky-panel

演示: http : //htmlpreview.github.io/? https: //github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm


1
嘿! 谢谢!这是一个很棒的解决方案,感谢您的分享,可以确保我节省了大量时间。这应该是该问题的整体可接受的解决方案,因为据我所读,这是最完整的解决方案。基本上,其他人并没有使用位置:固定样式之后的块的原始X位置解决问题。您解决了这个问题。真的,非常感谢!
Marcos Buarque

嘿Donny,也喜欢您的插件(v1.4.1)...确实遇到了一个问题,如果未指定,Bel elments失去了宽度。因此在拆卸时更改了它...仅通过设置宽度即可,使其保持不变。code//分离面板node.css({“ margin”:0,“ left”:nodeLeft,“ top”:newNodeTop,“ position”:“ fixed”,“ width”:node.width()}); code
汉考克将于

寻找并尝试了许多解决方案,并且“开箱即用”。很棒的工作!谢谢!
ajtatum 2012年

2
@WillHancock我添加了iPad支持,修复了刷新错误,并添加了onDetached和onReattached事件。拆下并重新连接后,新事件将使您能够访问面板和隔板。
Donny V. 2012年

4
还添加了parentSelector选项以支持div滚动。
Donny V.

24

这是不使用 jquery的方法(更新:请参见其他答案,现在仅可以使用CSS做到这一点)

var startProductBarPos=-1;
window.onscroll=function(){
  var bar = document.getElementById('nav');
  if(startProductBarPos<0)startProductBarPos=findPosY(bar);

  if(pageYOffset>startProductBarPos){
    bar.style.position='fixed';
    bar.style.top=0;
  }else{
    bar.style.position='relative';
  }

};

function findPosY(obj) {
  var curtop = 0;
  if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
    while (obj.offsetParent) {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
    curtop += obj.offsetTop;
  }
  else if (obj.y)
    curtop += obj.y;
  return curtop;
}
* {margin:0;padding:0;}
.nav {
  border: 1px red dashed;
  background: #00ffff;
  text-align:center;
  padding: 21px 0;

  margin: 0 auto;
  z-index:10; 
  width:100%;
  left:0;
  right:0;
}

.header {
  text-align:center;
  padding: 65px 0;
  border: 1px red dashed;
}

.content {
  padding: 500px 0;
  text-align:center;
  border: 1px red dashed;
}
.footer {
  padding: 100px 0;
  text-align:center;
  background: #777;
  border: 1px red dashed;
}
<header class="header">This is a Header</header>
<div id="nav" class="nav">Main Navigation</div>
<div class="content">Hello World!</div>
<footer class="footer">This is a Footer</footer>


4
谢谢!如今,越来越难以找到本机JS解决方案。这工作得很好。
谢里2015年

非常感谢,此方法非常有效,因为jquery与我的项目具有的某些旧企业代码冲突
sng 2016年

虽然我遇到了一个问题,如果我滚动到页面底部,它将自动弹出我回到顶部。
sng 2016年

@sng我的示例页面可以做到吗?
Jim W说恢复Monica

@JimW我发现了问题。我试图将其与左侧主要内容div旁边的基于垂直的菜单栏一起使用。当您向下滚动时,它会出错,因为它无法确定何时正确到达页面底部。我最终添加了一行代码来将容器div的高度设置为滚动事件侦听器的窗口屏幕大小
sng 2016年

9

这就是我用jquery做到的方式。这些都是从堆栈溢出的各种答案中总结出来的。此解决方案缓存选择器以提高性能,还解决了粘性div变为粘性时的“跳转”问题。

在jsfiddle上检查一下:http : //jsfiddle.net/HQS8s/

CSS:

.stick {
    position: fixed;
    top: 0;
}

JS:

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('stick');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            $mainMenuBarAnchor.height(0);
        }
    });
});

7

这是另一种选择:

JAVASCRIPT

var initTopPosition= $('#myElementToStick').offset().top;   
$(window).scroll(function(){
    if($(window).scrollTop() > initTopPosition)
        $('#myElementToStick').css({'position':'fixed','top':'0px'});
    else
        $('#myElementToStick').css({'position':'absolute','top':initTopPosition+'px'});
});

#myElementToStick应该从position:absoluteCSS属性开始。


1
我认为这是一个非常干净和容易的解决方案。我只是不会将元素定位为“绝对”-这可能会破坏布局-我只会将其设置为静态。
杰弗里德(Gerfried)

4

就像乔希·李Josh Lee)科林·哈特(Colin't Hart)所说的那样,您可以选择只position: sticky; top: 0;对您希望在div滚动的div应用...

另外,您唯一要做的就是将其复制到页面顶部或对其进行格式化以适合外部CSS工作表:

<style>
#sticky_div's_name_here { position: sticky; top: 0; }
</style>

只需用#sticky_div's_name_herediv的名称替换即可,即,如果您的div是<div id="example">,则将放置#example { position: sticky; top: 0; }


1

我的解决方案有些冗长,但是它可以处理居中布局从左边缘开始的可变位置。

// Ensurs that a element (usually a div) stays on the screen
//   aElementToStick   = The jQuery selector for the element to keep visible
global.makeSticky = function (aElementToStick) {
    var $elementToStick = $(aElementToStick);
    var top = $elementToStick.offset().top;
    var origPosition = $elementToStick.css('position');

    function positionFloater(a$Win) {
        // Set the original position to allow the browser to adjust the horizontal position
        $elementToStick.css('position', origPosition);

        // Test how far down the page is scrolled
        var scrollTop = a$Win.scrollTop();
        // If the page is scrolled passed the top of the element make it stick to the top of the screen
        if (top < scrollTop) {
            // Get the horizontal position
            var left = $elementToStick.offset().left;
            // Set the positioning as fixed to hold it's position
            $elementToStick.css('position', 'fixed');
            // Reuse the horizontal positioning
            $elementToStick.css('left', left);
            // Hold the element at the top of the screen
            $elementToStick.css('top', 0);
        }
    }

    // Perform initial positioning
    positionFloater($(window));

    // Reposition when the window resizes
    $(window).resize(function (e) {
        positionFloater($(this));
    });

    // Reposition when the window scrolls
    $(window).scroll(function (e) {
        positionFloater($(this));
    });
};

1

这是另一个版本,供那些遇到其他问题的人使用。它汇集了这个重复问题中讨论的技术,并动态生成所需的辅助DIV,因此不需要额外的HTML。

CSS:

.sticky { position:fixed; top:0; }

jQuery的:

function make_sticky(id) {
    var e = $(id);
    var w = $(window);
    $('<div/>').insertBefore(id);
    $('<div/>').hide().css('height',e.outerHeight()).insertAfter(id);
    var n = e.next();
    var p = e.prev();
    function sticky_relocate() {
      var window_top = w.scrollTop();
      var div_top = p.offset().top;
      if (window_top > div_top) {
        e.addClass('sticky');
        n.show();
      } else {
        e.removeClass('sticky');
        n.hide();
      }
    }
    w.scroll(sticky_relocate);
    sticky_relocate();
}

要使元素变粘,请执行以下操作:

make_sticky('#sticky-elem-id');

当元素变为粘性时,代码将管理剩余内容的位置,以防止其跳入粘性元素留下的间隙。向后滚动时,它还会将粘性元素返回到其原始非粘性位置。


您的方法与JohnB的方法非常相似。考虑到您对该答案的不同,我想知道(1)使用第二个“ helper div”是否有优势(而不是像JohnB那样仅使用1),以及(2)使用hide()和show()而不是仅仅设置辅助div的高度(就像JohnB一样)?也许是性能差异?到目前为止,我还无法分辨差异,但是某些情况下可能会有差异(例如可能涉及内联元素或其他内容),所以这就是我要问的原因。谢谢。
杰森·弗兰克

1

这是Josh Lee回答的扩展版本。如果您希望div在右侧的侧边栏上并在一定范围内浮动(即,您需要指定顶部和底部锚点位置)。当您在移动设备上查看该错误时,它还修复了一个错误(您需要检查左滚动位置,否则div将移出屏幕)。

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var sl = $(window).scrollLeft();
        var ot = $("#scroller-anchor-top").offset().top;
        var ol = $("#scroller-anchor-top").offset().left;
        var bt = $("#scroller-anchor-bottom").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            if (st < bt - 280) //280px is the approx. height for the sticky div
            {
                s.css({
                    position: "fixed",
                    top: "0px",
                    left: ol-sl
                }); 
            }
            else
            {
                s.css({
                    position: "fixed",
                    top: bt-st-280,
                    left: ol-sl
                }); 
            }
        } else {
            s.css({
                position: "relative",
                top: "",
                left: ""
            });

        }
    };
    $(window).scroll(move);
    move();
}


0

Evan提供的回答其他问题的信息可能会对您有所帮助:

滚动后检查元素是否可见

您基本上想修改元素的样式,以仅在验证document.body.scrollTop值等于或大于元素顶部之后,才将其设置为固定。


0

接受的答案有效,但是如果在其上方滚动,则不会移回到先前的位置。放置在顶部后,它始终会粘在顶部。

  $(window).scroll(function(e) {
    $el = $('.fixedElement');
    if ($(this).scrollTop() > 42 && $el.css('position') != 'fixed') {
      $('.fixedElement').css( 'position': 'fixed', 'top': '0px');

    } else if ($(this).scrollTop() < 42 && $el.css('position') != 'relative') {
      $('.fixedElement').css( 'relative': 'fixed', 'top': '42px');
//this was just my previous position/formating
    }
  });

jleedev的回应应该起作用,但我无法使其起作用。他的示例页面也不起作用(对我而言)。


0

您可以添加3行,这样当用户滚动回到顶部时,div会停留在原来的位置:

这是代码:

if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed'){
    $('.fixedElement').css({'position': 'relative', 'top': '200px'});
}

0

我在div中设置了链接,因此它是字母和数字链接的垂直列表。

#links {
    float:left;
    font-size:9pt;
    margin-left:0.5em;
    margin-right:1em;
    position:fixed;
    text-align:center;
    width:0.8em;
}

然后,我设置此便捷的jQuery函数以保存加载的位置,然后在滚动到该位置之外时将其更改为固定位置。

注意:仅当页面加载中可见链接时,这才起作用!

var listposition=false;
jQuery(function(){
     try{
        ///// stick the list links to top of page when scrolling
        listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position();
        console.log(listposition);
        $(window).scroll(function(e){
            $top = $(this).scrollTop();
            $el = jQuery('#links');
            //if(typeof(console)!='undefined'){
            //    console.log(listposition.top,$top);
            //}
            if ($top > listposition.top && $el.css('position') != 'fixed'){
                $el.css({'position': 'fixed', 'top': '0px'});
            }
            else if ($top < listposition.top && $el.css('position') == 'fixed'){
                $el.css({'position': 'static'});
            }
        });

    } catch(e) {
        alert('Please vendor admin@mydomain.com (Myvendor JavaScript Issue)');
    }
});

0

我使用上面的一些工作来创建这项技术。我改进了一下,以为我会分享我的工作。希望这可以帮助。

jsfuddle代码

function scrollErrorMessageToTop() {
    var flash_error = jQuery('#flash_error');
    var flash_position = flash_error.position();

    function lockErrorMessageToTop() {
        var place_holder = jQuery("#place_holder");
        if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") {
            flash_error.css({
                'position': 'fixed',
                'top': "0px",
                "width": flash_error.width(),
                "z-index": "1"
            });
            place_holder.css("display", "");
        } else {
            flash_error.css('position', '');
            place_holder.css("display", "none");
        }

    }
    if (flash_error.length > 0) {
        lockErrorMessageToTop();

        jQuery("#flash_error").after(jQuery("<div id='place_holder'>"));
        var place_holder = jQuery("#place_holder");
        place_holder.css({
            "height": flash_error.height(),
            "display": "none"
        });
        jQuery(window).scroll(function(e) {
            lockErrorMessageToTop();
        });
    }
}
scrollErrorMessageToTop();​

这是进行滚动的一种动态方式。它确实需要做一些工作,我会在某个时候将其转换为一个插件,但这是我在工作了一个小时后想到的。


0

在javascript中,您可以执行以下操作:

var element = document.getElementById("myid");
element.style.position = "fixed";
element.style.top = "0%";

0

不是一个确切的解决方案,而是一个不错的选择

CSS仅在屏幕顶部滚动条。解决了所有问题与ONLY CSSNO的JavaScript,NO JQuery的,没有大脑的工作()。

享受我的小提琴:D所有代码都包含在其中:)

的CSS

#menu {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}

.w {
    width: 900px;
    margin: 0 auto;
    margin-bottom: 40px;
}<br type="_moz">

把内容足够长的时间,所以你可以在这里看到效果:)呵呵,参考是有作为,因为他应该得到的事实,他的功劳

仅CSS屏幕顶部滚动条


有点
题外话

我并不反对一个好的解决方案,但是您答案中的代码提供了一种使菜单之类的东西始终位于顶部的方法。但这不是问题……
Tokk

您只是在修复div而不在滚动时做任何棘手的事情。
yogihosting

0

这是一个使用jquery可见插件的示例:http : //jsfiddle.net/711p4em4/

HTML:

<div class = "wrapper">
    <header>Header</header>
    <main>
        <nav>Stick to top</nav>
        Content
    </main>
    <footer>Footer</footer>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #e2e2e2;
}

.wrapper > header,
.wrapper > footer {
    font: 20px/2 Sans-Serif;
    text-align: center;
    background-color: #0040FF;
    color: #fff;
}

.wrapper > main {
    position: relative;
    height: 500px;
    background-color: #5e5e5e;
    font: 20px/500px Sans-Serif;
    color: #fff;
    text-align: center;
    padding-top: 40px;
}

.wrapper > main > nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font: 20px/2 Sans-Serif;
    color: #fff;
    text-align: center;
    background-color: #FFBF00;
}

.wrapper > main > nav.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

JS(包括jquery-visible插件):

(function($){

    /**
     * Copyright 2012, Digital Fusion
     * Licensed under the MIT license.
     * http://teamdf.com/jquery-plugins/license/
     *
     * @author Sam Sehnert
     * @desc A small plugin that checks whether elements are within
     *       the user visible viewport of a web browser.
     *       only accounts for vertical position, not horizontal.
     */
    var $w = $(window);
    $.fn.visible = function(partial,hidden,direction){

        if (this.length < 1)
            return;

        var $t        = this.length > 1 ? this.eq(0) : this,
            t         = $t.get(0),
            vpWidth   = $w.width(),
            vpHeight  = $w.height(),
            direction = (direction) ? direction : 'both',
            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;

        if (typeof t.getBoundingClientRect === 'function'){

            // Use this native browser method, if available.
            var rec = t.getBoundingClientRect(),
                tViz = rec.top    >= 0 && rec.top    <  vpHeight,
                bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
                lViz = rec.left   >= 0 && rec.left   <  vpWidth,
                rViz = rec.right  >  0 && rec.right  <= vpWidth,
                vVisible   = partial ? tViz || bViz : tViz && bViz,
                hVisible   = partial ? lViz || rViz : lViz && rViz;

            if(direction === 'both')
                return clientSize && vVisible && hVisible;
            else if(direction === 'vertical')
                return clientSize && vVisible;
            else if(direction === 'horizontal')
                return clientSize && hVisible;
        } else {

            var viewTop         = $w.scrollTop(),
                viewBottom      = viewTop + vpHeight,
                viewLeft        = $w.scrollLeft(),
                viewRight       = viewLeft + vpWidth,
                offset          = $t.offset(),
                _top            = offset.top,
                _bottom         = _top + $t.height(),
                _left           = offset.left,
                _right          = _left + $t.width(),
                compareTop      = partial === true ? _bottom : _top,
                compareBottom   = partial === true ? _top : _bottom,
                compareLeft     = partial === true ? _right : _left,
                compareRight    = partial === true ? _left : _right;

            if(direction === 'both')
                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
            else if(direction === 'vertical')
                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
            else if(direction === 'horizontal')
                return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
        }
    };

})(jQuery);

$(function() {
    $(window).scroll(function() {
        $(".wrapper > header").visible(true) ?
            $(".wrapper > main > nav").removeClass("fixed") :
            $(".wrapper > main > nav").addClass("fixed");
    });
});

-1

一直粘贴到页脚到达div:

function stickyCostSummary() {
    var stickySummary = $('.sticky-cost-summary');
    var scrollCostSummaryDivPosition = $(window).scrollTop();
    var footerHeight = $('#footer').height();
    var documentHeight = $(document).height();
    var costSummaryHeight = stickySummary.height();
    var headerHeight = 83;
    var footerMargin = 10;
    var scrollHeight = 252;
    var footerPosition = $('#footer').offset().top;

    if (scrollCostSummaryDivPosition > scrollHeight && scrollCostSummaryDivPosition <= (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeAttr('style');
        stickySummary.addClass('fixed');

    } else if (scrollCostSummaryDivPosition > (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin)) {
        stickySummary.removeClass('fixed');
        stickySummary.css({
          "position" : "absolute",
          "top" : (documentHeight - footerHeight - costSummaryHeight - headerHeight - footerMargin - scrollHeight) + "px"
      });
    } else {
        stickySummary.removeClass('fixed');
        stickySummary.css({
            "position" : "absolute",
            "top" : "0"
        });
    }
}

$window.scroll(stickyCostSummary);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.