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

发布于 2024-12-03 20:49:30 字数 1329 浏览 2 评论 0原文

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

我正在制作一个挤压页面一个巨大的侧边栏。它有大量的推荐、事实、图片等等。但是，我在顶部附近有一个按钮，我想在用户滚动时跟随用户向下移动页面。应该不会太难吧？

我有这个脚本 - 当 .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
            });
        };
    });
});

原文

/-----------------------------------------------------------------------------------/
EDIT: I do NOT want to use fixed CSS positioning. It's at the bottom of the viewport
without scrolling, however I want it to follow when it gets to the top.
/-----------------------------------------------------------------------------------/

I'm making a Squeeze Page with a MASSIVE sidebar. It's got tons of testimonials and facts and pictures and stuff. However, I have a button near the top I want to follow the user down the page as they scroll. Shouldn't be too hard right?

I've got this script - which starts dragging the .followme when it hits the top of the page. However - it also pushed down all the divs beneath it. Can I tell it to target JUST .follow and no affect the divs below it?

<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
            });
        };
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

虫児飞 2024-12-10 20:49:30

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

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

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

示例代码：

http://jsfiddle.net/bhpgC/

You have an easier option which doesn't require any JS\jQuery at all.

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

This will never affect any of the other elements of the page and doesn't require any scripting at all. Now if you need the element (followme) to for example show at a certain scroll % or any other interactivity you might think of, then you will be needing to think more creatively. But if the problem is just to let the element follow your scrolling then the above should be a good and clean solution.

Example code:

http://jsfiddle.net/bhpgC/

回复收藏 0 原文

~没有更多了~