0

/ -------------------------------------------------- ---------------------------------- / 编辑：我不想使用固定的 CSS 定位。它位于视口的底部而无需滚动，但是我希望它在到达顶部时跟随。/ -------------------------------------------------- ---------------------------------- /

我正在制作一个带有 MASSIVE 侧边栏的 Squeeze Page。它有大量的推荐信、事实、图片和其他东西。但是，我在顶部附近有一个按钮，我想在用户滚动时跟随用户向下滚动。应该不会太难吧？

我有这个脚本 - 当它到达页面顶部时开始拖动 .followme。然而 - 它也推倒了它下面的所有 div。我可以告诉它只定位 .follow 并且不影响它下面的 div 吗？

<script type="text/javascript">
var documentHeight = 0;
var topPadding = 15;
$(function() {
    var offset = $(".followme").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $(".followme").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight + 100);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $(".followme").stop().animate({
                marginTop: newPosition
            });
        } else {
            $(".followme").stop().animate({
                marginTop: 0
            });
        };
    });
});

4

1 回答 1

1

您有一个更简单的选项，它根本不需要任何 JS\jQuery。

.followme {
    position: fixed;
    height: 30px;
    width: 30px;
    background-color: #FF0000;
    top: 48%;
    left: 0;
}

这永远不会影响页面的任何其他元素，并且根本不需要任何脚本。现在，如果您需要元素（跟随我）以某个滚动百分比或您可能想到的任何其他交互性显示，那么您将需要更有创意地思考。但是，如果问题只是让元素跟随您的滚动，那么上面应该是一个很好且干净的解决方案。

示例代码：

http://jsfiddle.net/bhpgC/

于 2011-09-08T00:06:15.320 回答