在指定位置停止的页面底部的固定div [英] fixed div on bottom of page that stops in given place

问题描述

我有固定的div在我的页面的底部，工作很好。我不知道有没有一些简单的方法，使其停止在页面中的某个地方，当用户滚动到它。我希望它保持固定在底部，直到用户滚动到页面上某个已定义的地方，然后粘贴到页面，滚动像其余的内容。任何建议？

I have fixed div on bottom of my page that works well. I wonder if there is some simple way to make it "stop" on some place in page when user srolls down to it. I want it to remain fixed on bottom, until user scrolls down to some defined place on page and than stick it to the page and scroll like the rest of content. Any suggestions?

推荐答案

我尝试在jsfiddle上设置东西。当我写作，我看到，其他人已经发布了他们的选择。如果我以任何方式帮助： http://jsfiddle.net/PnUmM/1/

I tried setting something up on jsfiddle. While I was writing it up, I see that others have posted their alternatives. In case mine helps in any way: http://jsfiddle.net/PnUmM/1/

我在CSS中将位置设置为relative，计算它在文档加载时的位置，以保存信息，然后将其设置为fixed。

I set the position to relative in the CSS, calculate where it is on document load to keep the info aside and then set it to fixed.

var sticky_offset;
$(document).ready(function() {

    var original_position_offset = $('#sticky_for_a_while').offset();
    sticky_offset = original_position_offset.top;
    $('#sticky_for_a_while').css('position', 'fixed');


});

$(window).scroll(function () {
    var sticky_height = $('#sticky_for_a_while').outerHeight();
    var where_scroll = $(window).scrollTop();
    var window_height = $(window).height();


    if((where_scroll + window_height) > sticky_offset) {
        $('#sticky_for_a_while').css('position', 'relative');
    }

    if((where_scroll + window_height) < (sticky_offset + sticky_height))  {
        $('#sticky_for_a_while').css('position', 'fixed');
    }

});

这篇关于在指定位置停止的页面底部的固定div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！