Divs固定和不固定在两个绝对div之间切换 [英] Divs fixed and unfixed toggle between two absolute divs

问题描述

我使用下面的代码使固定的div（two）只有在两个绝对定位的div（one和footer）之间滚动时才保持固定。

I am using the following code to make a fixed div ("two") to only remain fixed when scrolling between two absolute positioned divs ("one" and "footer").

但是我有一个问题，当浏览器窗口变得更小或更大时，页脚和固定div（two）变得不固定之间的距离增加或减少，使得固定div在之前

But I am having one problem, when the browser window is made smaller or larger the distance between the footer and where the fixed div ("two") becomes unfixed increases or decreases, so that the fixed div becomes unfixed before the footer gets to it or after the footer has passed it.

我如何解决这个问题？谁可以帮助？

How can I solve this? Can anyone help?

DEMO here 。

更新（2016年7月21日）：

UPDATE (21 JULY 2016):

看来发生的是：

因为divleftside的宽度设置为百分比，当浏览器窗口被拖动更小时，divleftside会更高，以适应其内容。这会让divtwo挂在divfooter上方，因为div在页面加载时设置了两个可能的垂直位置。

Because div "leftside" has its width set as a percentage, when the browser window gets dragged smaller the div "leftside" gets higher to fit its content. This leaves div "two" hanging higher above div "footer" because div "two" lowest possible vertical position is set on page load.

我需要保持响应式设计，并且我不能在缩放浏览器窗口时重新加载页面，因为我的网站中的其他功能。缩放页面，然后在浏览器中刷新它实际上会正确地重置内容，但重新加载对我来说不是一个选择。

I need to maintain the responsive design, and I can't have the page reloading when scaling the browser window because of other functionality in my website. Scaling the page and then refreshing it in the browser actually does reset things properly, but reloading is not an option for me.

可能的选项来解决这个问题：

Perhaps options to solve this:

1. 当窗口缩放时，有没有办法重置divtwo
   的最低位置？


2. 或更好;也许可以非常频繁和自动地重置divtwo的最低可能的
   位置，或者每当用户在网页上做某事或缩放
   浏览器窗口时重置
   。这是因为我在div
   leftside中有可折叠段，这将使该div更高或更低，而没有
   缩放浏览器窗口。

我想在这段代码（？）中需要进行适应性修改：

I guess adaptation needs to be made in this section of the code(?):

$window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

这里是完整的脚本：

var window = this;

$.fn.followTo = function (from, bumper) {
    var $this = this,
        $window = $(window),
        $from = $(from),
        $bumper = $(bumper),
        $startPos = $from.offset().top + $from.height(),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() < $startPos) { 
                $this.css({
                    position: 'absolute',
                    top: $startPos
                });
            } else if ($window.scrollTop() > (bumperPos - thisHeight)) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        };
    $window.resize(function()
    {
        bumperPos = pos.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#two').followTo('#one', '#footer');

推荐答案

我做了三个修改：

• pos 变量未定义，应为 code>。


• 在resize上重置 $ startPos 这修复了粘性元素上方元素的问题 c> $ c> c> followTo 函数，并在切换固定 / 绝对



• The pos variable was not defined, it should be bumper.
• Reset $startPos on resize—this fixes the problem of element(s) above the sticky element changing their height/position on resize.
• Moved the fixed element's top value to a parameter in the followTo function, and take it in consideration when switching the fixed/absolute positions for a smoother transition.

以下是更新的 fiddle 。

$.fn.followTo = function (from, bumper, fixedOffsetTop) {
    var $this = this,
        $window = $(window),
        $from = $(from),
        $bumper = $(bumper),
        $startPos = $from.offset().top + $from.height(),
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() < $startPos - fixedOffsetTop) { 
                $this.css({
                    position: 'absolute',
                    top: $startPos
                });
            } else if ($window.scrollTop() > bumperPos - thisHeight - fixedOffsetTop) {
                $this.css({
                    position: 'absolute',
                    top: (bumperPos - thisHeight)
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: fixedOffsetTop
                });
            }
        };
    $window.resize(function()
    {
        $startPos = $from.offset().top + $from.height();
        bumperPos = $bumper.offset().top;
        thisHeight = $this.outerHeight();
        setPosition();
    });
    $window.scroll(setPosition);
    setPosition();
};

$('#two').followTo('#one', '#footer', 30);

这篇关于Divs固定和不固定在两个绝对div之间切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！