Question

这里有点令人费解。

我有一个div，我想一直在屏幕上显示。我使用以下CSS：

<style>
    .f {position: fixed;
     bottom:0px
     align:center;
     }
</style>

我试图弄清楚如何将它固定在屏幕底部，直到距离结束200px我希望它随页面滚动然后当用户滚动到页面时它将从底部200px页面底部。

非常感谢任何帮助

Answer 1

让我们做一个基本的构建：

<div id="content">Content to be scrolled as Wrapper </div>
<div id="mydiv" class="fixed"> Div that should be fixed </div>
<div id="end"> Everything after the fixed div </div>

我们使用课程.fixed快速修复底部的div，以便我们可以使用.addClass('fixed')和.removeClass('fixed')切换一些css属性。

.fixed {
   position: fixed;
   bottom: 0;
}

所以有这个.scrollTop函数，它允许我们从顶部到底部滚动一定数量的像素。这正是你所需要的。诀窍是要知道固定元素顶部有多少像素应该开始与内容一起滚动。

让我们做一些jQuery来找出：

// Create function to add/remove Class if .scrollTop
$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);

    $window.scroll(function (e) {
        if ($window.scrollTop() < pos) {
            $this.addClass('fixed');
        } else {
            $this.removeClass('fixed');
        }
    });
};

var $height_content = $('#content').outerHeight(); //get height of content
var $height_div = $('#mydiv').outerHeight(); //get height of fixed div
var $height_viewport = $(window).height(); //get height of viewport
var $fixed_till = ($height_content + $height_div - $height_viewport);

// Use function created above like so:
// $('selector').followTo( /* height from top in px */ );
$('#mydiv').followTo($fixed_till);

检查 DEMO ON JSFIDDLE

当用户靠近页面末尾时修复内容而不是滚动

1 个答案: