Question

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

我正在制作一个带有大量侧边栏的Squeeze页面。它有大量的推荐和事实，图片和东西。但是，我在顶部附近有一个按钮，我想在滚动页面时跟随用户。不应该太难了吗？

我有这个脚本 - 当它到达页面顶部时开始拖动.followme。然而 - 它也压低了它下面的所有div。我可以告诉它定位JUST。关注并且不会影响它下面的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
            });
        };
    });
});

Answer 1

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

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

这绝不会影响页面的任何其他元素，也不需要任何脚本。现在，如果您需要元素（followme）来显示某个滚动％或您可能想到的任何其他交互性，那么您将需要更具创造性地思考。但如果问题只是让元素跟随你的滚动，那么上面应该是一个好的和干净的解决方案。

示例代码：

http://jsfiddle.net/bhpgC/

Javascript - 使div跟随页面（工作，但它也推动侧边栏？）

1 个答案: