Question

我在一些网站上看到了这种效果（CSS Wizardry - 观看徽标/导航），在向下滚动页面时元素保持在视图中（这不是硬件）＆amp;然后当它与指定元素（硬部分）“碰撞”（因为缺少更好的单词）时停止滚动。

我找到了两个旨在做到这一点但却没有我需要的所有功能的插件：

1。 jQuery lockScroll http://www.anthonymclin.com/code/7-miscellaneous/108-jquery-lockscroll-13

这会强制所需元素的位置固定为开始，这可能意味着如果元素从折叠下方开始，则从未见过。（演示：http://www.anthonymclin.com/media/demos/jquery.lockScroll.1.3/）

2。 jQuery fixedScroll 在CSS Wizardry

上使用

这迫使位置再次固定＆amp;它需要一个顶部偏移才能工作。此偏移量应用于DOMReady＆amp;如果元素不在该位置，则移动元素 - 它是滚动时使用的偏移量。

我所知道的插件没有产生预期的效果：

我需要能够拥有两全其美的优势。不幸的是，我自己无法做到这一点，有没有人知道我没有列出的插件或知道修改另一个插件的方法？

Answer 1

看起来csswizardry正在使用http://csswizardry.com/wp-content/themes/new/js/jquery.scroll-lock.js

如果你改变了

      $(window).bind('load scroll', function(e) {

        if ($(window).scrollTop() + offsetTop >= lockPosition) {
            el.css({ position: "absolute", top: lockPosition });
        } else {
            el.css({ position: "fixed", top: offsetTop });
        }
    });

到

       $(window).bind('load scroll', function(e) {

        if ($(window).scrollTop() + offsetTop >= maxlockPosition) {
            el.css({ position: "absolute", bottom: maxlockPosition });
        } else if ($(window).scrollTop() + offsetTop >= lockPosition) {
            el.css({ position: "absolute", top: lockPosition });
        } else {
            el.css({ position: "fixed", top: offsetTop });
        }
    });

并将maxlockPosition设置为要阻止的元素的位置。

Answer 2

我喜欢这个

http://imakewebthings.github.com/jquery-waypoints/sticky-elements/

看来twitter的引导程序更好。

滚动时将元素保持在视图中，但使用jQuery与另一个指定元素“碰撞”后将其停止

2 个答案: