开始和停止div在其他两个div之间滚动 [英] Start and stop div scrolling between two other divs

问题描述

最近有人帮助我解决了这个问题，但是我需要更多帮助.我目前正在工作-

var windw = this;

$.fn.followTo = function ( elem ) {
var $this = this,
    $window = $(windw),
    $bumper = $(elem),
    bumperPos = $bumper.offset().top,
    thisHeight = $this.outerHeight(),
    setPosition = function(){
        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();
};

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

此处的示例- jsFiddle

一旦div到达另一个div的边界，这将阻止div滚动-效果很好.我现在想弄清楚的是如何使滚动div从一个div开始，然后向下滚动并在另一个div停止，如本示例中那样.任何人有任何想法吗?

这是一个可怕的例子- jsFiddle .蓝色部分应坐在黄色部分下方，直到到达为止.由于我的大脑功能有限，我只是想不通这是怎么回事.

非常感谢您的帮助.

解决方案

向函数添加另一个参数以传递起始元素，然后在函数内部设置一些变量以将其offset().top + height()存储为起始位置，然后添加另一个if来检查scrollTop()的值是否小于起始值，例如:

var windw = this;

$.fn.followTo = function (from, bumper) { //renamed "elem" to "bumper", to 
    var $this = this,                     //prevent ambiguity
        $window = $(windw),
        $from = $(from),
        $bumper = $(bumper),
        $startPos = $from.offset().top + $from.height(), //new start position
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() < $startPos) { //new if < startPos
                $this.css({
                    position: 'absolute',
                    top: $startPos //resets element to start position
                });
            } 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();
};

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

JSFiddle

Someone else recently helped me out with the start of this question but I'm after a little more help. I currently have this working -

var windw = this;

$.fn.followTo = function ( elem ) {
var $this = this,
    $window = $(windw),
    $bumper = $(elem),
    bumperPos = $bumper.offset().top,
    thisHeight = $this.outerHeight(),
    setPosition = function(){
        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();
};

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

Example here - jsFiddle

This stops a div from scrolling once it reaches the border of another div - works great. What I'm stuck trying to figure out now is how I can make the scrolling div START at a div, then scroll down and stop at another div as it does in this example. Anyone got any ideas?

Here's a terrible illustration of it - jsFiddle. The blue section SHOULD sit underneath the yellow section until you reach it. I just can't figure out how that's possible due to my limited brain function.

Thanks a lot for any help.

解决方案

Add another parameter to your function to pass the start element, then set some vars inside your function to store its offset().top + height() as the start position, then just add another if to check if the scrollTop() value is lower than the start one, like this:

var windw = this;

$.fn.followTo = function (from, bumper) { //renamed "elem" to "bumper", to 
    var $this = this,                     //prevent ambiguity
        $window = $(windw),
        $from = $(from),
        $bumper = $(bumper),
        $startPos = $from.offset().top + $from.height(), //new start position
        bumperPos = $bumper.offset().top,
        thisHeight = $this.outerHeight(),
        setPosition = function(){
            if ($window.scrollTop() < $startPos) { //new if < startPos
                $this.css({
                    position: 'absolute',
                    top: $startPos //resets element to start position
                });
            } 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();
};

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

JSFiddle

这篇关于开始和停止div在其他两个div之间滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！