Question

我在这里得到了这个答案，当用户向下滚动页面时进行div滚动。但是，我需要div在它到达另一个div并停留在那个位置时停止。我怎么能这样做？

jQuery代码：

(function($) {
    var element = $('.sim-area-sim'),
    originalY = element.offset().top;

    // Space between element and top of screen (when scrolling)
    var topMargin = 140;

    // Should probably be set in CSS; but here just for emphasis
    element.css('position', 'relative');

    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();

        element.stop(true, true).animate({
            top: scrollTop < originalY
                 ? 0
                 : scrollTop - originalY + topMargin
        }, 300);
    });
})(jQuery);

谢谢！

Answer 1

<强> jsFiddle demo

你走了：

<style>
.styleclass {
    text-transform: //your change here !important;
}
</style>

如何知道它们何时发生碰撞？

嗯，首先你需要计算你的盒子的高度吗？与滚动时相比，您可以像使用元素顶部位置一样，但在某些时候，您必须开始减去该值，这是下一个元素位置与您的盒子碰撞的结果的负值。

.top

(function($) {
    var el = $('.follow-scroll'),
        next = el.next(),           // Who's the element's next element in HTML
        elOrgY = el.offset().top,
        elH = el.outerHeight(true),
        topMargin = 20;             // Space between element and top of screen (when scrolling)

   
    el.css('position', 'relative');
    
    $(window).on('scroll', function(event) {
        var scrollTop = $(window).scrollTop();
        var elNewTop = scrollTop - elOrgY + topMargin;
        var nextViewportY = next[0].getBoundingClientRect().top;
        var subtractToTop = Math.min( 0, nextViewportY-(elH+topMargin) ); // Return only 0 or negative numbers
        el.css({
            top: scrollTop < elOrgY - topMargin
                    ? 0
                    : elNewTop + subtractToTop
        }, 300);
    });
})(jQuery);

/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

/* https://css-tricks.com/snippets/css/clear-fix/ */
.group:after { content: ""; display: table; clear: both; }

body { font: 15px/20px sans-serif; color: #444; }
p { margin-bottom: 30px; }

.wrapper { width: 100%; max-width: 700px; padding: 3%; }

.content, .sidebar { float: left; }

.content { width: 68%; margin-right: 5%; }

.sidebar { width: 27%; }

.box { background: #eee; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; }

当div到达另一个div时停止div滚动

1 个答案: