什么样的 jquery/css 脚本将按钮定位为“固定”，但也会对网页滚动做出反应？

Posted 2023-02-24

【中文标题】什么样的 jquery/css 脚本将按钮定位为“固定”，但也会对网页滚动做出反应？

【英文标题】：What kind of jquery/css script positions a button "fixed", but also reacts to webpage scrolling?

【发布时间】：2013-01-16 17:16:12

【问题描述】：

抱歉，这个问题有点空洞。让我解释一下我所追求的效果：

我不仅在左侧：0 和顶部：50% 的按钮上使用 position:fixed，还看到了当用户向下滚动时，按钮（以及页面的其余部分向上）的效果，但按钮会轻松回到原来的固定位置。所以它比单纯的 CSS 固定项目更引人注目。

我很难用谷歌搜索这个效果。我不记得我在哪些网站上看到过它，但当向下滚动一篇文章时，它通常包含社交/分享按钮。

谁能帮忙？

【问题讨论】：

我想您可能正在寻找一个浮动面板。 jquery4u.com/menus/floating-message-plugins

感谢您提供此脚本。这非常相似，我很高兴我现在拥有它作为资源，但是下面的答案就是我的意思。干杯伙伴！

【参考方案1】：

你可以使用一个相当简单的 jQuery 代码 sn-p 直接取自这里：http://css-tricks.com/scrollfollow-sidebar/（不是我的代码）

$(function() 

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() 
        if ($window.scrollTop() > offset.top) 
            $sidebar.stop().animate(
                marginTop: $window.scrollTop() - offset.top + topPadding
            );
         else 
            $sidebar.stop().animate(
                marginTop: 0
            );
        
    );

);

当然，更改 #sidebar 以匹配您的按钮。

【讨论】：

准确！这就是我所追求的。一个回来并追赶你的元素！